Allow select to be searched without opening dropdown manually (#18000)

* Update select.js

Signed-off-by: Nessim Abadi <abadinessim@gmail.com>

* Update select.js

styling

Signed-off-by: Nessim Abadi <abadinessim@gmail.com>

* Refactor typeahead handling in select utility for readability and consistency.

* Enhance select utility to improve handling of searchable dropdowns and typeahead functionality.

* Remove legacy typeahead functionality from select utility for simplification.

* Simplify comment in select utility by removing obsolete reference to typeahead functionality.

* fix select search

* remove old code

* Update select.js

---------

Signed-off-by: Nessim Abadi <abadinessim@gmail.com>
Co-authored-by: Dan Harrin <git@danharrin.com>

packages/support/resources/js/utilities/select.js

@@ -1144,6 +1144,35 @@ export class Select {
                     this.closeDropdown()
                 }
                 break
+            default:
+                // If searchable and user types a printable character, open dropdown and focus search input
+                if (
+                    this.isSearchable &&
+                    !event.ctrlKey &&
+                    !event.metaKey &&
+                    !event.altKey &&
+                    typeof event.key === 'string' &&
+                    event.key.length === 1
+                ) {
+                    event.preventDefault()
+                    const char = event.key
+
+                    if (!this.isOpen) {
+                        this.openDropdown()
+                    }
+
+                    if (this.searchInput) {
+                        // Focus and append the typed character to the search input
+                        this.searchInput.focus()
+                        this.searchInput.value =
+                            (this.searchInput.value || '') + char
+                        // Trigger input event so search runs
+                        this.searchInput.dispatchEvent(
+                            new Event('input', { bubbles: true }),
+                        )
+                    }
+                }
+                break
         }
     }
 
@@ -1194,6 +1223,31 @@ export class Select {
             case 'Tab':
                 this.closeDropdown()
                 break
+            default:
+                // If searchable and user types a printable character while dropdown is open, focus search input and start search
+                if (
+                    this.isSearchable &&
+                    !event.ctrlKey &&
+                    !event.metaKey &&
+                    !event.altKey &&
+                    typeof event.key === 'string' &&
+                    event.key.length === 1
+                ) {
+                    event.preventDefault()
+                    const char = event.key
+
+                    if (this.searchInput) {
+                        // Focus and append the typed character to the search input
+                        this.searchInput.focus()
+                        this.searchInput.value =
+                            (this.searchInput.value || '') + char
+                        // Trigger input event so search runs
+                        this.searchInput.dispatchEvent(
+                            new Event('input', { bubbles: true }),
+                        )
+                    }
+                }
+                break
         }
     }