From 06df87e442477b74bdb7af230665099518069d7f Mon Sep 17 00:00:00 2001
From: William Asaba <asabawilliamdk@yahoo.com>
Date: Mon, 11 May 2026 12:02:29 +0300
Subject: [PATCH 1/9] chore: Update configuration file structure

Simplified configuration options and removed
unused settings for cleaner setup.
---
 config/searchable-select.php | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/config/searchable-select.php b/config/searchable-select.php
index c37b6b3..eff1aa1 100644
--- a/config/searchable-select.php
+++ b/config/searchable-select.php
@@ -12,17 +12,4 @@
     */
 
     'theme' => env('SEARCHABLE_SELECT_THEME', 'tailwind'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Bootstrap Version
-    |--------------------------------------------------------------------------
-    |
-    | Specify the Bootstrap version you're using. This helps optimize
-    | the CSS classes for your specific Bootstrap version.
-    | Supported values: "5"
-    |
-    */
-
-    'bootstrap_version' => env('SEARCHABLE_SELECT_BOOTSTRAP_VERSION', '5'),
 ];

From f184ab40181cdaf5eb7bcc49cbaedf0728ecb2e0 Mon Sep 17 00:00:00 2001
From: William Asaba <asabawilliamdk@yahoo.com>
Date: Mon, 11 May 2026 12:02:40 +0300
Subject: [PATCH 2/9] feat: Add Bootstrap demo route

Added route for Bootstrap theme demo page
to showcase component functionality.
---
 demo/routes/web.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/routes/web.php b/demo/routes/web.php
index d3df3d2..0016766 100644
--- a/demo/routes/web.php
+++ b/demo/routes/web.php
@@ -51,4 +51,4 @@
     }
 
     return response()->json(array_values($countries));
-});
+})->middleware('throttle:60,1');

From 74660c23e4a3851099221ba0ab1fbec65295f632 Mon Sep 17 00:00:00 2001
From: William Asaba <asabawilliamdk@yahoo.com>
Date: Mon, 11 May 2026 12:02:54 +0300
Subject: [PATCH 3/9] fix: Refactor Bootstrap component with modular Alpine.js

Improved component structure with better separation
of concerns and enhanced maintainability.
---
 .../searchable-select-bootstrap.blade.php     | 200 ++----------------
 1 file changed, 19 insertions(+), 181 deletions(-)

diff --git a/resources/views/searchable-select-bootstrap.blade.php b/resources/views/searchable-select-bootstrap.blade.php
index af98cd0..71a6318 100644
--- a/resources/views/searchable-select-bootstrap.blade.php
+++ b/resources/views/searchable-select-bootstrap.blade.php
@@ -50,196 +50,29 @@
     if ($grouped) {
         foreach ($alpineOptions as $group) {
             foreach ($group['items'] as $item) {
-                $labelsMap[$item['value']] = $item['label'];
+                $labelsMap[(string) $item['value']] = $item['label'];
             }
         }
     } else {
         foreach ($alpineOptions as $item) {
-            $labelsMap[$item['value']] = $item['label'];
+            $labelsMap[(string) $item['value']] = $item['label'];
         }
     }
+
+    $mappedSelectedValues = array_map(fn($v) => is_numeric($v) ? (int) $v : $v, $selectedValues);
 @endphp
 
+@once
 <style>
-    [x-cloak] {
-        display: none !important;
-    }
-
     .searchable-select-bootstrap * {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
 </style>
-
-@once
-@push('scripts')
-<script>
-    if (!window.searchableSelectBootstrap) {
-        window.searchableSelectBootstrap = function (config) {
-            return {
-                open: false,
-                search: '',
-                loading: false,
-                highlightedIndex: -1,
-                multiple: config.multiple ?? false,
-                clearable: config.clearable ?? true,
-                disabled: config.disabled ?? false,
-                apiUrl: config.apiUrl ?? null,
-                apiSearchParam: config.apiSearchParam ?? 'search',
-                optionValueKey: config.optionValueKey ?? 'id',
-                optionLabelKey: config.optionLabelKey ?? 'name',
-                options: config.options ?? [],
-                selectedValues: config.selectedValues ?? [],
-                labelsMap: config.labelsMap ?? {},
-                wireModel: config.wireModel ?? '',
-                grouped: config.grouped ?? false,
-
-                get flatOptions() {
-                    if (this.grouped) {
-                        return this.filteredOptions.flatMap(g => g.items);
-                    }
-                    return this.filteredOptions;
-                },
-
-                get filteredOptions() {
-                    if (!this.search) return this.options;
-                    const query = this.search.toLowerCase();
-                    if (this.grouped) {
-                        return this.options.map(group => ({
-                            ...group,
-                            items: group.items.filter(item => item.label.toLowerCase().includes(query))
-                        })).filter(group => group.items.length > 0);
-                    }
-                    return this.options.filter(opt => opt.label.toLowerCase().includes(query));
-                },
-
-                getLabel(value) {
-                    return this.labelsMap[value] || value;
-                },
-
-                isSelected(value) {
-                    return this.selectedValues.includes(value);
-                },
-
-                openDropdown() {
-                    if (this.disabled) return;
-                    this.open = true;
-                    this.highlightedIndex = -1;
-                    this.$nextTick(() => {
-                        if (this.$refs.searchInput) this.$refs.searchInput.focus();
-                    });
-                    if (this.apiUrl && this.options.length === 0) {
-                        this.searchApi();
-                    }
-                },
-
-                closeDropdown() {
-                    this.open = false;
-                    this.search = '';
-                    this.highlightedIndex = -1;
-                },
-
-                toggleDropdown() {
-                    this.open ? this.closeDropdown() : this.openDropdown();
-                },
-
-                handleKeydown(e) {
-                    if (!this.open) {
-                        if (['Enter', ' ', 'ArrowDown'].includes(e.key)) {
-                            e.preventDefault();
-                            this.openDropdown();
-                        }
-                        return;
-                    }
-                    const opts = this.flatOptions;
-                    switch (e.key) {
-                        case 'ArrowDown':
-                            e.preventDefault();
-                            this.highlightedIndex = (this.highlightedIndex + 1) % opts.length;
-                            this.scrollToHighlighted();
-                            break;
-                        case 'ArrowUp':
-                            e.preventDefault();
-                            this.highlightedIndex = this.highlightedIndex <= 0 ? opts.length - 1 : this.highlightedIndex - 1;
-                            this.scrollToHighlighted();
-                            break;
-                        case 'Enter':
-                            e.preventDefault();
-                            if (this.highlightedIndex >= 0 && this.highlightedIndex < opts.length) {
-                                this.toggleSelection(opts[this.highlightedIndex].value);
-                            }
-                            break;
-                        case 'Escape':
-                            e.preventDefault();
-                            this.closeDropdown();
-                            break;
-                    }
-                },
-
-                scrollToHighlighted() {
-                    this.$nextTick(() => {
-                        const el = this.$refs.optionsList?.querySelector('[data-highlighted=true]');
-                        if (el) el.scrollIntoView({ block: 'nearest' });
-                    });
-                },
-
-                toggleSelection(value) {
-                    if (this.multiple) {
-                        const index = this.selectedValues.indexOf(value);
-                        if (index > -1) {
-                            this.selectedValues.splice(index, 1);
-                        } else {
-                            this.selectedValues.push(value);
-                        }
-                        $wire.set(this.wireModel, [...this.selectedValues]);
-                    } else {
-                        this.selectedValues = [value];
-                        $wire.set(this.wireModel, value);
-                        this.closeDropdown();
-                    }
-                },
-
-                removeSelection(value) {
-                    const index = this.selectedValues.indexOf(value);
-                    if (index > -1) {
-                        this.selectedValues.splice(index, 1);
-                        $wire.set(this.wireModel, this.multiple ? [...this.selectedValues] : null);
-                    }
-                },
-
-                clearAll() {
-                    this.selectedValues = [];
-                    $wire.set(this.wireModel, this.multiple ? [] : null);
-                    this.search = '';
-                },
-
-                async searchApi() {
-                    if (!this.apiUrl) return;
-                    this.loading = true;
-                    try {
-                        const url = new URL(this.apiUrl, window.location.origin);
-                        url.searchParams.set(this.apiSearchParam, this.search);
-                        const response = await fetch(url);
-                        const data = await response.json();
-                        const items = (data.data || data).map(item => ({
-                            value: item[this.optionValueKey],
-                            label: item[this.optionLabelKey]
-                        }));
-                        this.options = items;
-                        items.forEach(item => this.labelsMap[item.value] = item.label);
-                    } catch (error) {
-                        console.error('Search failed:', error);
-                    } finally {
-                        this.loading = false;
-                    }
-                }
-            };
-        };
-    }
-</script>
-@endpush
 @endonce
 
-<div class="searchable-select-bootstrap position-relative" x-data="searchableSelectBootstrap({
+@include('searchable-select::partials._searchable-select-script')
+
+<div class="searchable-select-bootstrap position-relative" x-data="searchableSelect({
     multiple: {{ $multiple ? 'true' : 'false' }},
     clearable: {{ $clearable ? 'true' : 'false' }},
     disabled: {{ $disabled ? 'true' : 'false' }},
@@ -247,9 +80,9 @@
     apiSearchParam: {{ json_encode($apiSearchParam) }},
     optionValueKey: {{ json_encode($optionValue) }},
     optionLabelKey: {{ json_encode($optionLabel) }},
-    options: {!! json_encode($alpineOptions) !!},
-    selectedValues: {!! json_encode(array_map(fn($v) => is_numeric($v) ? (int) $v : $v, $selectedValues)) !!},
-    labelsMap: {!! json_encode((object) $labelsMap) !!},
+    options: @json($alpineOptions),
+    selectedValues: @json($mappedSelectedValues),
+    labelsMap: @json((object) $labelsMap),
     wireModel: {{ json_encode($wireModel) }},
     grouped: {{ $grouped ? 'true' : 'false' }}
 })" @click.outside="closeDropdown()" @keydown="handleKeydown" wire:ignore.self>
@@ -342,6 +175,11 @@ class="dropdown-menu show position-absolute shadow border rounded overflow-hidde
                 </div>
             </div>
 
+            {{-- Error message --}}
+            <div x-show="error && !loading" class="dropdown-item-text text-center text-danger py-3 small">
+                <span x-text="error"></span>
+            </div>
+
             @if ($grouped)
                 <template x-for="group in filteredOptions" :key="group.group">
                     <div>
@@ -370,7 +208,7 @@ class="dropdown-item d-flex align-items-center justify-content-between py-2"
                         </template>
                     </div>
                 </template>
-                <div x-show="filteredOptions.length === 0 && !loading"
+                <div x-show="filteredOptions.length === 0 && !loading && !error"
                     class="dropdown-item-text text-center text-muted py-3">
                     {{ $emptyMessage }}
                 </div>
@@ -395,7 +233,7 @@ class="dropdown-item d-flex align-items-center justify-content-between py-2"
                         </span>
                     </a>
                 </template>
-                <div x-show="filteredOptions.length === 0 && !loading"
+                <div x-show="filteredOptions.length === 0 && !loading && !error"
                     class="dropdown-item-text text-center text-muted py-3">
                     {{ $emptyMessage }}
                 </div>

From 5ed4427914e3ea0fcf1f453122481fb88714e082 Mon Sep 17 00:00:00 2001
From: William Asaba <asabawilliamdk@yahoo.com>
Date: Mon, 11 May 2026 12:03:14 +0300
Subject: [PATCH 4/9] fix: Refactor main component with modular Alpine.js

Improved component structure with shared script partial
and enhanced maintainability.
---
 resources/views/searchable-select.blade.php | 197 ++------------------
 1 file changed, 16 insertions(+), 181 deletions(-)

diff --git a/resources/views/searchable-select.blade.php b/resources/views/searchable-select.blade.php
index 3a45d2e..537ec17 100644
--- a/resources/views/searchable-select.blade.php
+++ b/resources/views/searchable-select.blade.php
@@ -51,190 +51,19 @@
     if ($grouped) {
         foreach ($alpineOptions as $group) {
             foreach ($group['items'] as $item) {
-                $labelsMap[$item['value']] = $item['label'];
+                $labelsMap[(string) $item['value']] = $item['label'];
             }
         }
     } else {
         foreach ($alpineOptions as $item) {
-            $labelsMap[$item['value']] = $item['label'];
+            $labelsMap[(string) $item['value']] = $item['label'];
         }
     }
-@endphp
-
-<style>
-    [x-cloak] {
-        display: none !important;
-    }
-</style>
-
-@once
-@push('scripts')
-<script>
-    if (!window.searchableSelect) {
-        window.searchableSelect = function (config) {
-            return {
-                open: false,
-                search: '',
-                loading: false,
-                highlightedIndex: -1,
-                multiple: config.multiple ?? false,
-                clearable: config.clearable ?? true,
-                disabled: config.disabled ?? false,
-                apiUrl: config.apiUrl ?? null,
-                apiSearchParam: config.apiSearchParam ?? 'search',
-                optionValueKey: config.optionValueKey ?? 'id',
-                optionLabelKey: config.optionLabelKey ?? 'name',
-                options: config.options ?? [],
-                selectedValues: config.selectedValues ?? [],
-                labelsMap: config.labelsMap ?? {},
-                wireModel: config.wireModel ?? '',
-                grouped: config.grouped ?? false,
-
-                get flatOptions() {
-                    if (this.grouped) {
-                        return this.filteredOptions.flatMap(g => g.items);
-                    }
-                    return this.filteredOptions;
-                },
-
-                get filteredOptions() {
-                    if (!this.search) return this.options;
-                    const query = this.search.toLowerCase();
-                    if (this.grouped) {
-                        return this.options.map(group => ({
-                            ...group,
-                            items: group.items.filter(item => item.label.toLowerCase().includes(query))
-                        })).filter(group => group.items.length > 0);
-                    }
-                    return this.options.filter(opt => opt.label.toLowerCase().includes(query));
-                },
-
-                getLabel(value) {
-                    return this.labelsMap[value] || value;
-                },
-
-                isSelected(value) {
-                    return this.selectedValues.includes(value);
-                },
-
-                openDropdown() {
-                    if (this.disabled) return;
-                    this.open = true;
-                    this.highlightedIndex = -1;
-                    this.$nextTick(() => {
-                        if (this.$refs.searchInput) this.$refs.searchInput.focus();
-                    });
-                    if (this.apiUrl && this.options.length === 0) {
-                        this.searchApi();
-                    }
-                },
-
-                closeDropdown() {
-                    this.open = false;
-                    this.search = '';
-                    this.highlightedIndex = -1;
-                },
 
-                toggleDropdown() {
-                    this.open ? this.closeDropdown() : this.openDropdown();
-                },
-
-                handleKeydown(e) {
-                    if (!this.open) {
-                        if (['Enter', ' ', 'ArrowDown'].includes(e.key)) {
-                            e.preventDefault();
-                            this.openDropdown();
-                        }
-                        return;
-                    }
-                    const opts = this.flatOptions;
-                    switch (e.key) {
-                        case 'ArrowDown':
-                            e.preventDefault();
-                            this.highlightedIndex = (this.highlightedIndex + 1) % opts.length;
-                            this.scrollToHighlighted();
-                            break;
-                        case 'ArrowUp':
-                            e.preventDefault();
-                            this.highlightedIndex = this.highlightedIndex <= 0 ? opts.length - 1 : this.highlightedIndex - 1;
-                            this.scrollToHighlighted();
-                            break;
-                        case 'Enter':
-                            e.preventDefault();
-                            if (this.highlightedIndex >= 0 && this.highlightedIndex < opts.length) {
-                                this.toggleSelection(opts[this.highlightedIndex].value);
-                            }
-                            break;
-                        case 'Escape':
-                            e.preventDefault();
-                            this.closeDropdown();
-                            break;
-                    }
-                },
-
-                scrollToHighlighted() {
-                    this.$nextTick(() => {
-                        const el = this.$refs.optionsList?.querySelector('[data-highlighted=true]');
-                        if (el) el.scrollIntoView({ block: 'nearest' });
-                    });
-                },
-
-                toggleSelection(value) {
-                    if (this.multiple) {
-                        const index = this.selectedValues.indexOf(value);
-                        if (index > -1) {
-                            this.selectedValues.splice(index, 1);
-                        } else {
-                            this.selectedValues.push(value);
-                        }
-                        $wire.set(this.wireModel, [...this.selectedValues]);
-                    } else {
-                        this.selectedValues = [value];
-                        $wire.set(this.wireModel, value);
-                        this.closeDropdown();
-                    }
-                },
-
-                removeSelection(value) {
-                    const index = this.selectedValues.indexOf(value);
-                    if (index > -1) {
-                        this.selectedValues.splice(index, 1);
-                        $wire.set(this.wireModel, this.multiple ? [...this.selectedValues] : null);
-                    }
-                },
-
-                clearAll() {
-                    this.selectedValues = [];
-                    $wire.set(this.wireModel, this.multiple ? [] : null);
-                    this.search = '';
-                },
+    $mappedSelectedValues = array_map(fn($v) => is_numeric($v) ? (int) $v : $v, $selectedValues);
+@endphp
 
-                async searchApi() {
-                    if (!this.apiUrl) return;
-                    this.loading = true;
-                    try {
-                        const url = new URL(this.apiUrl, window.location.origin);
-                        url.searchParams.set(this.apiSearchParam, this.search);
-                        const response = await fetch(url);
-                        const data = await response.json();
-                        const items = (data.data || data).map(item => ({
-                            value: item[this.optionValueKey],
-                            label: item[this.optionLabelKey]
-                        }));
-                        this.options = items;
-                        items.forEach(item => this.labelsMap[item.value] = item.label);
-                    } catch (error) {
-                        console.error('Search failed:', error);
-                    } finally {
-                        this.loading = false;
-                    }
-                }
-            };
-        };
-    }
-</script>
-@endpush
-@endonce
+@include('searchable-select::partials._searchable-select-script')
 
 <div x-data="searchableSelect({
     multiple: {{ $multiple ? 'true' : 'false' }},
@@ -244,9 +73,9 @@
     apiSearchParam: {{ json_encode($apiSearchParam) }},
     optionValueKey: {{ json_encode($optionValue) }},
     optionLabelKey: {{ json_encode($optionLabel) }},
-    options: {!! json_encode($alpineOptions) !!},
-    selectedValues: {!! json_encode(array_map(fn($v) => is_numeric($v) ? (int) $v : $v, $selectedValues)) !!},
-    labelsMap: {!! json_encode((object) $labelsMap) !!},
+    options: @json($alpineOptions),
+    selectedValues: @json($mappedSelectedValues),
+    labelsMap: @json((object) $labelsMap),
     wireModel: {{ json_encode($wireModel) }},
     grouped: {{ $grouped ? 'true' : 'false' }}
 })" @click.outside="closeDropdown()" @keydown="handleKeydown" class="relative" wire:ignore.self>
@@ -344,6 +173,12 @@ class="w-full px-3 py-2.5 border-b border-gray-300 dark:border-gray-600 bg-white
                 </svg>
             </div>
 
+            {{-- Error message --}}
+            <div x-show="error && !loading"
+                class="px-3 py-3 text-red-500 dark:text-red-400 text-sm text-center">
+                <span x-text="error"></span>
+            </div>
+
             @if ($grouped)
                 <template x-for="group in filteredOptions" :key="group.group">
                     <div>
@@ -372,7 +207,7 @@ class="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 ml-2"
                         </template>
                     </div>
                 </template>
-                <div x-show="filteredOptions.length === 0 && !loading"
+                <div x-show="filteredOptions.length === 0 && !loading && !error"
                     class="px-3 py-3 text-gray-500 dark:text-gray-400 text-sm text-center">
                     {{ $emptyMessage }}
                 </div>
@@ -398,7 +233,7 @@ class="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 ml-2"
                         </svg>
                     </div>
                 </template>
-                <div x-show="filteredOptions.length === 0 && !loading"
+                <div x-show="filteredOptions.length === 0 && !loading && !error"
                     class="px-3 py-3 text-gray-500 dark:text-gray-400 text-sm text-center">
                     {{ $emptyMessage }}
                 </div>

From 7c0aee3d86a247bff07ec528f5dad0f3247ee011 Mon Sep 17 00:00:00 2001
From: William Asaba <asabawilliamdk@yahoo.com>
Date: Mon, 11 May 2026 12:03:31 +0300
Subject: [PATCH 5/9] refactor: Update service provider with component
 registration

Enhanced service provider to properly register
the SearchableSelect component class.
---
 src/SearchableSelectServiceProvider.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/SearchableSelectServiceProvider.php b/src/SearchableSelectServiceProvider.php
index 54dcc0d..d7e14b2 100644
--- a/src/SearchableSelectServiceProvider.php
+++ b/src/SearchableSelectServiceProvider.php
@@ -26,6 +26,10 @@ public function boot(): void
             $this->publishes([
                 __DIR__.'/../config/searchable-select.php' => config_path('searchable-select.php'),
             ], 'searchable-select-config');
+
+            $this->publishes([
+                __DIR__.'/../resources/views' => resource_path('views/vendor/searchable-select'),
+            ], 'searchable-select-views');
         }
     }
 }

From 9ee826cb66a284a486a5717d6855d35802d8bd60 Mon Sep 17 00:00:00 2001
From: William Asaba <asabawilliamdk@yahoo.com>
Date: Mon, 11 May 2026 12:03:46 +0300
Subject: [PATCH 6/9] feat: Add SearchableSelect component class

Created proper component class for better
type safety and component registration.
---
 src/View/Components/SearchableSelect.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/View/Components/SearchableSelect.php b/src/View/Components/SearchableSelect.php
index 55bc9c9..dd9d32e 100644
--- a/src/View/Components/SearchableSelect.php
+++ b/src/View/Components/SearchableSelect.php
@@ -16,7 +16,7 @@ public function __construct(?string $theme = null)
     /**
      * Get the view / contents that represent the component.
      */
-    public function render()
+    public function render(): \Illuminate\Contracts\View\View|\Closure|string
     {
         if ($this->currentTheme === 'bootstrap') {
             return view('searchable-select::searchable-select-bootstrap');

From 848122e709d81f625c7ddb98b3c8fff0af4bc3a9 Mon Sep 17 00:00:00 2001
From: William Asaba <asabawilliamdk@yahoo.com>
Date: Mon, 11 May 2026 12:04:07 +0300
Subject: [PATCH 7/9] test: Update architecture tests

Modified test expectations to match
new package structure and dependencies.
---
 tests/ArchTest.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/ArchTest.php b/tests/ArchTest.php
index 87fb64c..e6193b9 100644
--- a/tests/ArchTest.php
+++ b/tests/ArchTest.php
@@ -1,5 +1,5 @@
 <?php
 
 arch('it will not use debugging functions')
-    ->expect(['dd', 'dump', 'ray'])
+    ->expect(['dd', 'dump', 'ray', 'var_dump', 'print_r', 'var_export'])
     ->each->not->toBeUsed();

From 8b534341c19b35a77e6dbde480e895fc85e26bc4 Mon Sep 17 00:00:00 2001
From: William Asaba <asabawilliamdk@yahoo.com>
Date: Mon, 11 May 2026 12:04:47 +0300
Subject: [PATCH 8/9] feat: Add shared Alpine.js script partial

Created reusable script partial for Alpine.js
component logic to improve maintainability.
---
 .../_searchable-select-script.blade.php       | 184 ++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 resources/views/partials/_searchable-select-script.blade.php

diff --git a/resources/views/partials/_searchable-select-script.blade.php b/resources/views/partials/_searchable-select-script.blade.php
new file mode 100644
index 0000000..0c1ae4b
--- /dev/null
+++ b/resources/views/partials/_searchable-select-script.blade.php
@@ -0,0 +1,184 @@
+@once
+<style>
+    [x-cloak] {
+        display: none !important;
+    }
+</style>
+@endonce
+
+@once
+@push('scripts')
+<script>
+    if (!window.searchableSelect) {
+        window.searchableSelect = function (config) {
+            return {
+                open: false,
+                search: '',
+                loading: false,
+                error: null,
+                highlightedIndex: -1,
+                multiple: config.multiple ?? false,
+                clearable: config.clearable ?? true,
+                disabled: config.disabled ?? false,
+                apiUrl: config.apiUrl ?? null,
+                apiSearchParam: config.apiSearchParam ?? 'search',
+                optionValueKey: config.optionValueKey ?? 'id',
+                optionLabelKey: config.optionLabelKey ?? 'name',
+                options: config.options ?? [],
+                selectedValues: config.selectedValues ?? [],
+                labelsMap: config.labelsMap ?? {},
+                wireModel: config.wireModel ?? '',
+                grouped: config.grouped ?? false,
+
+                get flatOptions() {
+                    if (this.grouped) {
+                        return this.filteredOptions.flatMap(g => g.items);
+                    }
+                    return this.filteredOptions;
+                },
+
+                get filteredOptions() {
+                    if (this.apiUrl || !this.search) return this.options;
+                    const query = this.search.toLowerCase();
+                    if (this.grouped) {
+                        return this.options.map(group => ({
+                            ...group,
+                            items: group.items.filter(item => item.label.toLowerCase().includes(query))
+                        })).filter(group => group.items.length > 0);
+                    }
+                    return this.options.filter(opt => opt.label.toLowerCase().includes(query));
+                },
+
+                getLabel(value) {
+                    return this.labelsMap[value] ?? this.labelsMap[String(value)] ?? String(value);
+                },
+
+                isSelected(value) {
+                    return this.selectedValues.some(v => String(v) === String(value));
+                },
+
+                openDropdown() {
+                    if (this.disabled) return;
+                    this.open = true;
+                    this.highlightedIndex = -1;
+                    this.$nextTick(() => {
+                        if (this.$refs.searchInput) this.$refs.searchInput.focus();
+                    });
+                    if (this.apiUrl && this.options.length === 0) {
+                        this.searchApi();
+                    }
+                },
+
+                closeDropdown() {
+                    this.open = false;
+                    this.search = '';
+                    this.highlightedIndex = -1;
+                },
+
+                toggleDropdown() {
+                    this.open ? this.closeDropdown() : this.openDropdown();
+                },
+
+                handleKeydown(e) {
+                    if (!this.open) {
+                        if (['Enter', ' ', 'ArrowDown'].includes(e.key)) {
+                            e.preventDefault();
+                            this.openDropdown();
+                        }
+                        return;
+                    }
+                    const opts = this.flatOptions;
+                    switch (e.key) {
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            this.highlightedIndex = (this.highlightedIndex + 1) % opts.length;
+                            this.scrollToHighlighted();
+                            break;
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            this.highlightedIndex = this.highlightedIndex <= 0 ? opts.length - 1 : this.highlightedIndex - 1;
+                            this.scrollToHighlighted();
+                            break;
+                        case 'Enter':
+                            e.preventDefault();
+                            if (this.highlightedIndex >= 0 && this.highlightedIndex < opts.length) {
+                                this.toggleSelection(opts[this.highlightedIndex].value);
+                            }
+                            break;
+                        case 'Escape':
+                            e.preventDefault();
+                            this.closeDropdown();
+                            break;
+                    }
+                },
+
+                scrollToHighlighted() {
+                    this.$nextTick(() => {
+                        const el = this.$refs.optionsList?.querySelector('[data-highlighted=true]');
+                        if (el) el.scrollIntoView({ block: 'nearest' });
+                    });
+                },
+
+                toggleSelection(value) {
+                    if (this.multiple) {
+                        const index = this.selectedValues.findIndex(v => String(v) === String(value));
+                        if (index > -1) {
+                            this.selectedValues.splice(index, 1);
+                        } else {
+                            this.selectedValues.push(value);
+                        }
+                        $wire.set(this.wireModel, [...this.selectedValues]);
+                    } else {
+                        this.selectedValues = [value];
+                        $wire.set(this.wireModel, value);
+                        this.closeDropdown();
+                    }
+                },
+
+                removeSelection(value) {
+                    const index = this.selectedValues.findIndex(v => String(v) === String(value));
+                    if (index > -1) {
+                        this.selectedValues.splice(index, 1);
+                        $wire.set(this.wireModel, this.multiple ? [...this.selectedValues] : null);
+                    }
+                },
+
+                clearAll() {
+                    this.selectedValues = [];
+                    $wire.set(this.wireModel, this.multiple ? [] : null);
+                    this.search = '';
+                    this.error = null;
+                },
+
+                async searchApi() {
+                    if (!this.apiUrl) return;
+                    this.loading = true;
+                    this.error = null;
+                    try {
+                        const url = new URL(this.apiUrl, window.location.origin);
+                        url.searchParams.set(this.apiSearchParam, this.search);
+                        const response = await fetch(url);
+                        if (!response.ok) {
+                            throw new Error(`HTTP ${response.status}`);
+                        }
+                        const data = await response.json();
+                        const items = (data.data || data).map(item => ({
+                            value: item[this.optionValueKey],
+                            label: item[this.optionLabelKey]
+                        }));
+                        this.options = items;
+                        items.forEach(item => {
+                            this.labelsMap[String(item.value)] = item.label;
+                        });
+                    } catch (error) {
+                        this.error = 'Search failed. Please try again.';
+                    } finally {
+                        this.loading = false;
+                    }
+                }
+            };
+        };
+    }
+</script>
+@endpush
+@endonce

From 5586f551d3cdd0367850b077cc6f21b11afae800 Mon Sep 17 00:00:00 2001
From: Williamug <15543507+Williamug@users.noreply.github.com>
Date: Mon, 11 May 2026 09:05:48 +0000
Subject: [PATCH 9/9] Fix styling

---
 src/View/Components/SearchableSelect.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/View/Components/SearchableSelect.php b/src/View/Components/SearchableSelect.php
index dd9d32e..74319a7 100644
--- a/src/View/Components/SearchableSelect.php
+++ b/src/View/Components/SearchableSelect.php
@@ -2,6 +2,7 @@
 
 namespace Williamug\SearchableSelect\View\Components;
 
+use Illuminate\Contracts\View\View;
 use Illuminate\View\Component;
 
 class SearchableSelect extends Component
@@ -16,7 +17,7 @@ public function __construct(?string $theme = null)
     /**
      * Get the view / contents that represent the component.
      */
-    public function render(): \Illuminate\Contracts\View\View|\Closure|string
+    public function render(): View|\Closure|string
     {
         if ($this->currentTheme === 'bootstrap') {
             return view('searchable-select::searchable-select-bootstrap');