resources/views/components/tomselect.blade.php

@@ -1,26 +1,32 @@
 <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
 <style>
-    /* Ensure the TomSelect container doesn't get a transparent background */
-    .ts-control {
-        background-color: white !important;
-        border: 1px solid #ddd !important;
-    }
+    .ts-control { background-color: #ffffff !important; border: 1px solid #ced4da !important; min-height: 38px !important; }
 </style>
 <script>
-    document.addEventListener('DOMContentLoaded', () => {
-        document.querySelectorAll('select').forEach((el) => {
-            if (el.tomselect) return;
-            
-            new TomSelect(el, {
-                create: false,
-                hideSelected: true,
-                maxOptions: null,
-                sortField: {
-                    field: 'text',
-                    direction: 'asc'
+    (function() {
+        const init = () => {
+            console.log('TomSelect Initializing...');
+            const selects = document.querySelectorAll('select');
+            console.log('Select count:', selects.length);
+            selects.forEach((el) => {
+                if (el.tomselect) return;
+                try {
+                    new TomSelect(el, {
+                        create: false,
+                        sortField: { field: 'text', direction: 'asc' }
+                    });
+                    console.log('Initialized TomSelect on', el);
+                } catch(e) {
+                    console.error('TomSelect init error', e);
                 }
             });
-        });
-    });
+        };
+        
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', init);
+        } else {
+            init();
+        }
+    })();
 </script>