- Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes} + Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}
` : typeError || sizeError ? ` @@ -318,12 +318,12 @@ export class FileInput extends Component { ${ typeError - ? `Dit type bestand (${ext}) is ongeldig. Geldige bestandstypen zijn: ${uploadFileTypes}` + ? `Dit type bestand (${ext}) is ongeldig. Geldige bestandstypen zijn: ${uploadFileTypes}` : '' } ${ sizeError - ? 'Dit bestand is te groot' + ? 'Dit bestand is te groot' : '' } ` diff --git a/src/open_inwoner/js/components/siteimprove/tracking.js b/src/open_inwoner/js/components/siteimprove/tracking.js index 7df8ea8201..ca6062ca16 100644 --- a/src/open_inwoner/js/components/siteimprove/tracking.js +++ b/src/open_inwoner/js/components/siteimprove/tracking.js @@ -1,330 +1,441 @@ -// // Mock _sz object for testing -// if (typeof _sz === 'undefined') { -// var _sz = { -// push: function (data) { -// try { -// console.log('Event pushed to _sz:', data) -// } catch (error) { -// // Log the error -// console.error('Error occurred while pushing event data:', error) -// } -// }, -// } -// } - -if (typeof _sz !== 'undefined') { - console.log('-> SiteImprove _sz object exists: ', _sz) -} else { - console.log('-> SiteImprove _sz is not defined yet.') +// Mock _sz object for testing +if (typeof _sz === 'undefined') { + var _sz = { + push: function (data) { + try { + console.log('Event pushed to _sz:', data) + } catch (error) { + console.error('Error occurred while pushing event data:', error) + } + }, + } } -// Ensure EventTracker is initialized only once -let isEventTrackerInitialized = false +// *** SELECTORS MUST BE DEFINED HERE (GLOBAL SCOPE) *** +const specificSelectors = { + // Full replacement for click events + // Open Aanvraag via cards + '#cases-content > .card__grid .column a.card div': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > div > span.card__status_indicator_text': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > ul > li > p.utrecht-paragraph': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > h2': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > ul > li': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > ul > li .utrecht-paragraph': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > ul > li .card__caption span': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > span > span': [ + 'event', + 'Mijn aanvragen', + 'Click', + "Open aanvraag via 'Bekijk aanvraag' link", + ], + '#cases-content > div.card__grid > div > div > a > div > span > span.link__text': + [ + 'event', + 'Mijn aanvragen', + 'Click', + "Open aanvraag via 'Bekijk aanvraag' link", + ], + '.header > .header__container > nav.primary-navigation.primary-navigation--open.primary-navigation__main > .primary-navigation__list > li > ul > li > a > .link__text': + ['event', 'Dropdown Onderwerpen desktop', 'Click', 'Onderwerpen'], + '.header .header__submenu > nav.primary-navigation > ul > li.primary-navigation__list-item.dropdown-nav__toggle.nav__list--open > ul > li > a > .link__text': + ['event', 'Dropdown Onderwerpen mobiel', 'Click', 'Onderwerpen'], + // End of category events + '.footer__logo .link img': ['event', 'Footer', 'Click', 'Footer logo'], + // Start Search submits + '#search-form-mobile-closed > .form__actions > button': [ + 'event', + 'Header mobiel Zoeken', + 'Zoeken', + 'Icon click', + ], + '#search-form-mobile-closed > .form__actions > button > .material-icons ': [ + 'event', + 'Header mobiel Zoeken', + 'Icon click', + 'Zoeken', + ], + '#search-form-desktop > .form__actions > button': [ + 'event', + 'Header desktop Zoeken', + 'Icon click', + 'Zoeken', + ], + '#search-form-desktop > .form__actions > button > .material-icons ': [ + 'event', + 'Header desktop Zoeken', + 'Icon click', + 'Zoeken', + ], + // End of search submits + // Start Communicatievoorkeuren + // Can get contaminated with uncheck changes + '.form#change-notifications #id_messages_notifications': [ + 'event', + 'Communicatievoorkeuren', + 'Click berichtnotificatie', + 'Disable', + ], + '.form#change-notifications #id_plans_notifications': [ + 'event', + 'Communicatievoorkeuren', + 'Click samenwerkingnotificatie', + 'Disable', + ], + '.form#change-notifications #id_cases_notifications': [ + 'event', + 'Communicatievoorkeuren', + 'Click zaaknotificatie', + 'Disable', + ], + '.form#change-notifications #id_cases_notifications:checked': [ + 'event', + 'Communicatievoorkeuren', + 'Click zaaknotificatie', + 'Enable', + ], + '.form#change-notifications #id_messages_notifications:checked': [ + 'event', + 'Communicatievoorkeuren', + 'Click berichtnotificatie', + 'Enable', + ], + '.form#change-notifications #id_plans_notifications:checked': [ + 'event', + 'Communicatievoorkeuren', + 'Click samenwerkingnotificatie', + 'Enable', + ], + '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button': + [ + 'event', + 'Communicatievoorkeuren', + 'Change', + 'No Save (terug naar mijn profiel)', + ], + '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button .material-icons-outlined': + [ + 'event', + 'Communicatievoorkeuren', + 'Change', + 'No Save (terug naar mijn profiel)', + ], + '.form#change-notifications button.button--primary': [ + 'event', + 'Communicatievoorkeuren', + 'Change submit', + 'Save', + ], + // End of Communicatievoorkeuren + // Detail Case view + '#statuses_component .status-list__notification-content > p.utrecht-paragraph.status-list__upload.status-list__upload--enabled > a': + ['event', 'Aanvraag detail', 'Scroll click', 'Scroll omlaag'], + '#cases-detail-content .column.column--start-4.column--span-6 > section.case-detail__documents > .file-list > ul > li > aside > div > div > a > span': + ['event', 'Aanvraag detail', 'Click', 'Download document'], + '#document-upload > div.form__control.file-input > div.card > div > label.button.button--primary.file-input__label-empty': + ['event', 'Aanvraag detail', 'Click', 'Selecteer bestanden'], + '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button': + ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], + '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button span': + ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], + // Detail case toggle statuses + '#statuses_component > aside > ul > li.status-list__list-item.status--current > div > h3 > button .material-icons-outlined ': + ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open huidige status'], + '#statuses_component > aside > ul > li.status--completed.status-list__list-item > div > h3 > button .material-icons-outlined ': + ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open voltooide status'], + '#statuses_component > aside > ul > li.status--active.status-list__list-item > div > h3 > button .material-icons-outlined ': + ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open openstaande status'], + // Accessibility header + '.accessibility-header > ul > li > a[aria-label="Lees voor"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Schakel voorlezen', + ], + '.accessibility-header > ul > li > a[aria-label="Lees voor"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel voorlezen'], + '.accessibility-header > ul > li > a[aria-label="Pauzeer"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Schakel pauzeren', + ], + '.accessibility-header > ul > li > a[aria-label="Pauzeer"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel pauzeren'], + '.accessibility-header > ul > li > a[aria-label="Vergroten"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Schakel vergroten', + ], + '.accessibility-header > ul > li > a[aria-label="Vergroten"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel vergroten'], + '.accessibility-header > ul > li > a[aria-label="Verkleinen"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel verkleinen'], + '.accessibility-header > ul > li > a[aria-label="Verkleinen"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel verkleinen'], + '.accessibility-header > ul > li > a[aria-label="Dyslexie"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Schakel dyslexie', + ], + '.accessibility-header > ul > li > a[aria-label="Dyslexie"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel dyslexie'], + '.accessibility-header > ul > li > a[aria-label="Help"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Open help pop-up', + ], + '.accessibility-header > ul > li > a[aria-label="Help"] > .material-icons': [ + 'event', + 'Accessibility header', + 'Click', + 'Open help pop-up', + ], + '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], + '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], + // Filters in Cases list + '#filterBar .filter-bar__mobile-button > button': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filters pop-up mobiel', + ], + '#filterBar .filter-bar__mobile-button > button span': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filters pop-up mobiel', + ], + '.filter-bar #selectButton': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filter dropdown', + ], + '.filter-bar .multiselect-listbox #listboxDropdown input[type="checkbox"]': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Checkbox status filter', + ], + '.filter-bar .multiselect-listbox #listboxDropdown .checkbox__label': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Checkbox status filter option', + ], + // Track breadcrumbs + '.breadcrumbs .link': [ + 'event', + 'Kruimelpad', + 'Click', + 'Navigeren via kruimelpad', + ], + // ... more click selectors +} -;(function () { - function initEventTracker() { - if (isEventTrackerInitialized) return // Prevent multiple initializations - isEventTrackerInitialized = true +const partialSelectors = { + // Partial replacement for click events + '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn profiel"]': + { category: 'Mijn Profiel', action: 'Click mijn Profiel' }, + // ... more partial click selectors +} - class EventTracker { - constructor(selectorMap) { - this.selectorMap = selectorMap - this.trackEvents() - } +const changeSelectors = { + // Full replacement for change events + '.form#profile-edit input[name="name"]': [ + 'event', + 'Contactgegevens', + 'name', + 'Change', + ], - trackEvents() { - // Use a single event listener for each event type - document.body.addEventListener( - 'click', - this.handleEvent.bind(this, 'click') - ) - document.body.addEventListener( - 'change', - this.handleEvent.bind(this, 'change') - ) - document.body.addEventListener( - 'keydown', - this.handleEvent.bind(this, 'keydown') - ) - } + '.form#profile-edit input[name="first_name"]': [ + 'event', + 'Contactgegevens', + 'Voornaam', + 'Change', + ], - handleEvent(eventType, event) { - const target = event.target - const actionMap = this.selectorMap[eventType] + '.form#profile-edit input[name="last_name"]': [ + 'event', + 'Contactgegevens', + 'Achternaam', + 'Change', + ], - if (!actionMap) { - return - } + '.form#profile-edit input[name="email"]': [ + 'event', + 'Contactgegevens', + 'E-mail', + 'Change', + ], + '.form#profile-edit input[name="phonenumber"]': [ + 'event', + 'Contactgegevens', + 'Telefoonnummer', + 'Change', + ], + '#id_query': ['event', 'Header', 'Zoeken', 'Enter click'], + '.form input[name="query"]': ['event', 'Header', 'Zoeken', 'Enter click'], + // ... more change selectors +} - if (eventType === 'click') { - this.handleClickEvent(target) - } else if (eventType === 'change') { - this.handleChangeEvent(target) - } else if (eventType === 'keydown' && event.key === 'Enter') { - this.handleEnterKeyEvent(target) - } - } +const keydownSelectors = { + // Full replacement for keydown (Enter) events + '#id_query': ['event', 'Header', 'Zoeken', 'Enter click'], + '.form#profile-edit input[name="phonenumber"]': [ + 'event', + 'Contactgegevens', + 'Telefoonnummer', + 'Change', + ], + // ... more keydown selectors +} - handleClickEvent(target) { - const actionMap = this.selectorMap['click'] +;(function () { + let isEventTrackerInitialized = false - if (!actionMap) { - return - } + function initGeneralEventTracker() { + if (isEventTrackerInitialized) return + isEventTrackerInitialized = true - Object.keys(actionMap).forEach((selector) => { - if (target.matches(selector)) { - const eventData = actionMap[selector] - eventData.push(this.extractEventData(target)) - _sz.push(eventData) - } - }) - } + const eventTypes = ['click', 'change', 'keydown'] - handleChangeEvent(target) { - const actionMap = this.selectorMap['change'] + const selectorMaps = { + click: { full: specificSelectors, partial: partialSelectors }, + change: { full: changeSelectors }, + keydown: { full: keydownSelectors }, + } - if (!actionMap) { - return + function handleSelectors(eventType, target, selectors, isPartial = false) { + for (const [selector, data] of Object.entries(selectors)) { + if (target.matches(selector)) { + console.log( + `Specific event pushed (${ + isPartial ? 'partial' : 'full' + } - ${eventType}):`, + data + ) + return data } + } + return null + } - Object.keys(actionMap).forEach((selector) => { - if (target.matches(selector)) { - const eventData = actionMap[selector] - eventData.push(this.extractEventData(target)) - _sz.push(eventData) - } - }) + function getCategoryFromURL() { + const path = window.location.pathname + const parts = path.split('/') + if (parts.length > 1) { + return parts.slice(1).join('/') + } else { + return 'Home-page' } + } - handleEnterKeyEvent(target) { - const actionMap = this.selectorMap['keydown'] + function getLabelFromTarget(target) { + return ( + target.getAttribute('aria-label') || + target.value || + target.textContent.trim() || + 'Empty label' + ) + } - if (!actionMap) { - return - } + function handleEvent(event) { + const eventType = event.type + const target = event.target + let eventData = null + + if (!eventTypes.includes(eventType)) { + console.warn(`Unsupported event type: ${eventType}`) + return + } - Object.keys(actionMap).forEach((selector) => { - if (target.matches(selector)) { - const eventData = actionMap[selector] - eventData.push(this.extractEventData(target)) - _sz.push(eventData) + // Check if selectorMaps[eventType] exists BEFORE accessing its properties + if (selectorMaps.hasOwnProperty(eventType)) { + // This is the fix! + eventData = handleSelectors( + eventType, + target, + selectorMaps[eventType].full + ) + if (!eventData && selectorMaps[eventType].partial) { + let partialData = handleSelectors( + eventType, + target, + selectorMaps[eventType].partial, + true + ) + if (partialData) { + const category = partialData.category || getCategoryFromURL() + const label = partialData.label || getLabelFromTarget(target) + const action = partialData.action || eventType + eventData = ['event', category, action, label] } - }) + } } - extractEventData(target) { - if (!target || typeof target.getAttribute !== 'function') { - return target.textContent.trim() + if (eventType === 'click' && !eventData) { + let isInteractive = false + let currentElement = target + while (currentElement) { + if ( + ['a', 'button', 'label', 'input', 'select', 'textarea'].includes( + currentElement.tagName.toLowerCase() + ) + ) { + isInteractive = true + break + } + currentElement = currentElement.parentElement } - return ( - target.getAttribute('aria-label') || - target.value || - target.textContent.trim() - ) + if (isInteractive) { + const category = getCategoryFromURL() + const label = getLabelFromTarget(target) + eventData = ['event', category, eventType, label] + } } - } - const selectorMap = { - click: { - '.form#profile-edit button[type="submit"]': [ - 'event', - 'Contactgegevens', - 'Change', - 'Save (Profiel bewerkt)', - ], - '.form#profile-edit a.button': [ - 'event', - 'Contactgegevens', - 'Click', - 'No Save (terug naar mijn profiel)', - ], - '#profile-edit > .form__actions.form__actions--fullwidth > a > .material-icons-outlined': - [ - 'event', - 'Contactgegevens', - 'Click', - 'No Save (terug naar mijn profiel)', - ], - // Start Category events - '#content .plugin__categories .card img': [ - 'event', - 'Homepage', - 'Click', - 'Onderwerpen card image', - ], - '#content .plugin__categories .card .link': [ - 'event', - 'Homepage', - 'Click', - 'Onderwerpen card tekstlink', - ], - '.header > .header__container > nav.primary-navigation.primary-navigation--open.primary-navigation__main > .primary-navigation__list > li > ul > li > a > .link__text': - ['event', 'Dropdown Onderwerpen desktop', 'Click', 'Onderwerpen'], - '.header .header__submenu > nav.primary-navigation > ul > li.primary-navigation__list-item.dropdown-nav__toggle.nav__list--open > ul > li > a > .link__text': - ['event', 'Dropdown Onderwerpen mobiel', 'Click', 'Onderwerpen'], - // End of category events - '.footer__logo .link img': ['event', 'Footer', 'Click', 'Footer logo'], - // Start Search submits - '#search-form-mobile-closed > .form__actions > button': [ - 'event', - 'Header mobiel Zoeken', - 'Zoeken', - 'Icon click', - ], - '#search-form-mobile-closed > .form__actions > button > .material-icons ': - ['event', 'Header mobiel Zoeken', 'Icon click', 'Zoeken'], - '#search-form-desktop > .form__actions > button': [ - 'event', - 'Header desktop Zoeken', - 'Icon click', - 'Zoeken', - ], - '#search-form-desktop > .form__actions > button > .material-icons ': [ - 'event', - 'Header desktop Zoeken', - 'Icon click', - 'Zoeken', - ], - // End of search submits - // Start Communicatievoorkeuren - // Can get contaminated with uncheck changes - '.form#change-notifications #id_messages_notifications': [ - 'event', - 'Communicatievoorkeuren Berichtnotificaties', - 'UNCHECK', - 'Disable', - ], - '.form#change-notifications #id_plans_notifications': [ - 'event', - 'Communicatievoorkeuren Samenwerkingnotificaties', - 'UNCHECK', - 'Disable', - ], - '.form#change-notifications #id_cases_notifications': [ - 'event', - 'Communicatievoorkeuren Zaaknotificaties', - 'UNCHECK', - 'Disable', - ], - '.form#change-notifications #id_cases_notifications:checked': [ - 'event', - 'Communicatievoorkeuren Zaaknotificaties', - 'check', - 'Enable', - ], - '.form#change-notifications #id_messages_notifications:checked': [ - 'event', - 'Communicatievoorkeuren Berichtnotificaties', - 'check', - 'Enable', - ], - '.form#change-notifications #id_plans_notifications:checked': [ - 'event', - 'Communicatievoorkeuren Samenwerkingnotificaties', - 'check', - 'Enable', - ], - '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button': - [ - 'event', - 'Communicatievoorkeuren', - 'Click', - 'No Save (terug naar mijn profiel)', - ], - '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button .material-icons-outlined': - [ - 'event', - 'Communicatievoorkeuren', - 'Click', - 'No Save (terug naar mijn profiel)', - ], - '.form#change-notifications button.button--primary': [ - 'event', - 'Communicatievoorkeuren', - 'Submit', - 'Save', - ], - // End of Communicatievoorkeuren - // Start Header dropdown profiel - '.header > .header__container > nav.primary-navigation.primary-navigation__authenticated > .primary-navigation__list > .primary-navigation__list-item > ul > li:nth-child(1) > a': - ['event', 'Mijn Profiel', 'Click', 'Open mijn profiel'], - '.header > .header__container > nav.primary-navigation.primary-navigation--open.primary-navigation__authenticated > .primary-navigation__list > .primary-navigation__list-item > .subpage-list > li:nth-child(1) > a > .link__text': - ['event', 'Mijn Profiel', 'Click', 'Open mijn profiel'], - '.header > .header__container > nav.primary-navigation.primary-navigation__authenticated > .primary-navigation__list > .primary-navigation__list-item > ul > li:nth-child(1) > a > .material-icons-outlined': - ['event', 'Mijn Profiel', 'Click', 'Open mijn profiel'], - // End header dropdown profiel - '.header nav.primary-navigation.primary-navigation__authenticated > ul > li > ul > li.header__list-item > a': - ['event', 'Logout button', 'Click', 'Logout'], - '.header nav.primary-navigation.primary-navigation__authenticated > ul > li > ul > li.header__list-item > a .link__text': - ['event', 'Logout button', 'Click', 'Logout'], - '.header nav.primary-navigation.primary-navigation__authenticated > ul > li > ul > li.header__list-item > a > .material-icons': - ['event', 'Logout button', 'Click', 'Logout'], - // Filters in Cases list - '.filter-bar #selectButton': [ - 'event', - 'Status filter button', - 'Click', - 'Filter status', - ], - '.filter-bar input[type="checkbox"]': [ - 'event', - 'Status filter checkbox', - 'Click', - 'Check status filter option', - ], - '.filter-bar .checkbox__label': [ - 'event', - 'Status filter checkbox', - 'Click', - 'Check status filter option', - ], - }, - change: { - '.form#profile-edit input[name="phone"]': [ - 'event', - 'Contactgegevens', - 'change', - 'Telefoonnummer', - ], - }, - keydown: { - '.form#profile-edit input[name="phone"]': [ - 'event', - 'Contactgegevens', - 'change', - 'Telefoonnummer', - ], - }, + if (eventData && typeof _sz !== 'undefined') { + _sz.push(eventData) + } else if (eventData) { + console.warn('_sz is not defined') + } } - new EventTracker(selectorMap) - } - - // Poller function - function checkForSzObject() { - const intervalId = setInterval(function () { - if (typeof _sz !== 'undefined') { - clearInterval(intervalId) // Stop the interval once _sz is defined - initEventTracker() // Initialize EventTracker - } else { - console.log('-> SiteImprove _sz is not defined yet.') + window.addEventListener('click', handleEvent) + window.addEventListener('change', handleEvent) + window.addEventListener('keydown', (event) => { + if (event.key === 'Enter') { + handleEvent(event) } - }, 1000) // Check every 1000 milliseconds (1 second) + }) } - // Start checking for _sz object - checkForSzObject() - - // MutationObserver to detect DOM changes - const observer = new MutationObserver(function () { - if (typeof _sz !== 'undefined') { - observer.disconnect() // Stop observing once _sz is available - initEventTracker() - } - }) - - // Observe DOM changes - observer.observe(document, { childList: true, subtree: true }) + initGeneralEventTracker() })() diff --git a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss index a8a75c8f09..5eb65288ba 100644 --- a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss +++ b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss @@ -163,6 +163,8 @@ } .multiselect-listbox__content { + z-index: 0; + .checkbox__label { display: flex; flex-direction: row;