Use Tom Select CDN major version 2

contao/templates/frontend/event_filter.html.twig

@@ -31,7 +31,7 @@
         </div>
     </div>
 
-    <button type="button" id="eventfilter-reset" class="eventfilter-reset" hidden>Filter zurücksetzen</button>
+    <button type="button" id="eventfilter-reset" class="eventfilter-reset" aria-label="Alle Filter zurücksetzen" aria-controls="{{ targetEventListId|default('eventlist')|e('html_attr') }}" hidden>Filter zurücksetzen</button>
 
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
@@ -69,13 +69,13 @@
     }
 
     #eventfilters .widget-select.active .ts-control {
-        outline: 2px solid currentColor;
-        outline-offset: 2px;
+        outline: 3px solid currentColor;
+        outline-offset: 3px;
     }
 
     #eventfilters .ts-control:focus-within {
-        outline: 2px solid currentColor;
-        outline-offset: 2px;
+        outline: 3px solid currentColor;
+        outline-offset: 3px;
     }
 
     #eventfilters .eventfilter-reset[hidden] {
@@ -83,33 +83,21 @@
     }
 
     #eventfilters .ts-wrapper.single .ts-control {
-        position: relative;
+        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::after {
-        content: '';
-        position: absolute;
-        right: 0.75rem;
-        top: 50%;
-        width: 0;
-        height: 0;
-        border-left: 0.3rem solid transparent;
-        border-right: 0.3rem solid transparent;
-        border-top: 0.4rem solid currentColor;
-        transform: translateY(-30%);
-        pointer-events: none;
-        opacity: 0.7;
-    }
-
-    #eventfilters .ts-wrapper.single.dropdown-active .ts-control::after {
-        transform: translateY(-65%) rotate(180deg);
+    #eventfilters .ts-wrapper.single .ts-control > input {
+        width: auto;
     }
 
 </style>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
-<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
+<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');
@@ -147,22 +135,45 @@
             return null;
         }
 
+        let shouldBlurOnChange = false;
+
         return new window.TomSelect(selectElement, {
-            create: true,
+            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() {
-                if (!this.control_input) {
+                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.control_input.setAttribute('autocomplete', 'off');
-                this.control_input.setAttribute('autocorrect', 'off');
-                this.control_input.setAttribute('autocapitalize', 'off');
-                this.control_input.setAttribute('spellcheck', 'false');
-                this.control_input.setAttribute('name', `${selectElement.id}-ts-input`);
+                this.blur();
+                shouldBlurOnChange = false;
             },
         });
     };