Switch event filter selects back to native controls

contao/templates/frontend/event_filter.html.twig

@@ -68,12 +68,12 @@
         pointer-events: none;
     }
 
-    #eventfilters .widget-select.active .ts-control {
+    #eventfilters .widget-select.active select {
         outline: 3px solid currentColor;
         outline-offset: 3px;
     }
 
-    #eventfilters .ts-control:focus-within {
+    #eventfilters select:focus-visible {
         outline: 3px solid currentColor;
         outline-offset: 3px;
     }
@@ -82,23 +82,8 @@
         display: none;
     }
 
-    #eventfilters .ts-wrapper.single .ts-control {
-        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
-        background-repeat: no-repeat;
-        background-position: right 0.75rem center;
-        background-size: 16px 12px;
-        padding-right: 2rem;
-    }
-
-    #eventfilters .ts-wrapper.single .ts-control > input {
-        width: auto;
-    }
-
 </style>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2/dist/css/tom-select.css">
-<script src="https://cdn.jsdelivr.net/npm/tom-select@2/dist/js/tom-select.complete.min.js"></script>
-
 <script type="module">
     const filters = document.getElementById('eventfilters');
 
@@ -132,58 +117,6 @@
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
-    const initTomSelect = (selectElement) => {
-        if (!selectElement || 'undefined' === typeof window.TomSelect) {
-            return null;
-        }
-
-        let shouldBlurOnChange = false;
-
-        return new window.TomSelect(selectElement, {
-            create: false,
-            sortField: {
-                field: 'text',
-                direction: 'asc',
-            },
-            render: {
-                no_results() {
-                    return '<div class="no-results" role="option" aria-disabled="true">Keine Ergebnisse gefunden</div>';
-                },
-                no_more_results() {
-                    return '<div class="no-more-results" role="option" aria-disabled="true">Keine weiteren Ergebnisse</div>';
-                },
-            },
-            onInitialize() {
-                const markPointerInteraction = () => {
-                    shouldBlurOnChange = true;
-                };
-
-                const markKeyboardInteraction = () => {
-                    shouldBlurOnChange = false;
-                };
-
-                this.control.addEventListener('pointerdown', markPointerInteraction);
-                this.control.addEventListener('touchstart', markPointerInteraction, { passive: true });
-                this.control.addEventListener('keydown', markKeyboardInteraction);
-                this.dropdown.addEventListener('pointerdown', markPointerInteraction);
-                this.dropdown.addEventListener('touchstart', markPointerInteraction, { passive: true });
-                this.dropdown.addEventListener('keydown', markKeyboardInteraction);
-            },
-            onChange() {
-                if (!shouldBlurOnChange) {
-                    return;
-                }
-
-                this.blur();
-                shouldBlurOnChange = false;
-            },
-        });
-    };
-
-    const tagTom = initTomSelect(tagSelect);
-    const locationTom = initTomSelect(locationSelect);
-    const orgTom = initTomSelect(orgSelect);
-
     const hasOptionValue = (selectElement, value) => {
         if (!selectElement) {
             return false;
@@ -282,12 +215,12 @@
         const locationValue = filterState.type === 'location' ? `location-${filterState.value}` : '';
         const orgValue = filterState.type === 'org' ? `org-${filterState.value}` : '';
 
-        setSelectValue(tagSelect, tagTom, tagValue);
-        setSelectValue(locationSelect, locationTom, locationValue);
-        setSelectValue(orgSelect, orgTom, orgValue);
+        setSelectValue(tagSelect, tagValue);
+        setSelectValue(locationSelect, locationValue);
+        setSelectValue(orgSelect, orgValue);
     };
 
-    const setSelectValue = (selectElement, tomInstance, value) => {
+    const setSelectValue = (selectElement, value) => {
         if (!selectElement) {
             return;
         }
@@ -299,11 +232,7 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (tomInstance) {
-                tomInstance.setValue(value, true);
-            } else {
             selectElement.value = value;
-            }
         } finally {
             queueMicrotask(() => {
                 suppressedChangeEvents = Math.max(0, suppressedChangeEvents - 1);
@@ -429,8 +358,8 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationTom, '');
-        setSelectValue(orgSelect, orgTom, '');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
 
         applyFilter(
             !selectedValue
@@ -446,8 +375,8 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagTom, '');
-        setSelectValue(orgSelect, orgTom, '');
+        setSelectValue(tagSelect, '');
+        setSelectValue(orgSelect, '');
 
         applyFilter(
             !selectedValue
@@ -463,8 +392,8 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagTom, '');
-        setSelectValue(locationSelect, locationTom, '');
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
 
         applyFilter(
             !selectedValue
@@ -474,9 +403,9 @@
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagTom, '');
-        setSelectValue(locationSelect, locationTom, '');
-        setSelectValue(orgSelect, orgTom, '');
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
 
         applyFilter({ type: 'all', value: '' });
     });