Add Tom Select arrow and disable input autocomplete

contao/templates/frontend/event_filter.html.twig

@@ -82,6 +82,30 @@
         display: none;
     }
 
+    #eventfilters .ts-wrapper.single .ts-control {
+        position: relative;
+        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);
+    }
+
 </style>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
@@ -129,6 +153,17 @@
                 field: 'text',
                 direction: 'asc',
             },
+            onInitialize() {
+                if (!this.control_input) {
+                    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`);
+            },
         });
     };