propagate extraInputAttributes to searchable Select Butons

packages/forms/resources/js/components/select.js

@@ -1,6 +1,7 @@
 import { Select } from '../../../../support/resources/js/utilities/select.js'
 
 export default function selectFormComponent({
+    extraInputAttributes,
     canOptionLabelsWrap,
     canSelectPlaceholder,
     isHtmlAllowed,
@@ -44,6 +45,7 @@ export default function selectFormComponent({
                 options,
                 placeholder,
                 state: this.state,
+                extraInputAttributes,
                 canOptionLabelsWrap,
                 canSelectPlaceholder,
                 initialOptionLabel,

packages/forms/resources/views/components/select.blade.php

@@ -129,6 +129,7 @@ class="fi-hidden"
                 x-load
                 x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('select', 'filament/forms') }}"
                 x-data="selectFormComponent({
+                            extraInputAttributes: @js($extraInputAttributeBag->merge(['id'=>$id], escape: false)),
                             canOptionLabelsWrap: @js($canOptionLabelsWrap),
                             canSelectPlaceholder: @js($canSelectPlaceholder),
                             isHtmlAllowed: @js($isHtmlAllowed),

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

@@ -21,6 +21,7 @@ export class Select {
         options,
         placeholder,
         state,
+        extraInputAttributes = [],
         canOptionLabelsWrap = true,
         canSelectPlaceholder = true,
         initialOptionLabel = null,
@@ -56,6 +57,7 @@ export class Select {
         this.originalOptions = JSON.parse(JSON.stringify(options)) // Keep a copy of original options
         this.placeholder = placeholder
         this.state = state
+        this.extraInputAttributes = extraInputAttributes
         this.canOptionLabelsWrap = canOptionLabelsWrap
         this.canSelectPlaceholder = canSelectPlaceholder
         this.initialOptionLabel = initialOptionLabel
@@ -148,6 +150,10 @@ export class Select {
         this.selectButton.className = 'fi-select-input-btn'
         this.selectButton.type = 'button'
         this.selectButton.setAttribute('aria-expanded', 'false')
+        //loop through extraInputAttributes and set them on the selectButton
+        Object.entries(this.extraInputAttributes).forEach(([name, value]) => {
+            this.selectButton.setAttribute(name, value)
+        })
 
         // Create the selected value display
         this.selectedDisplay = document.createElement('div')
@@ -880,6 +886,9 @@ export class Select {
             event.stopPropagation() // Prevent dropdown from toggling
             this.selectOption('') // Select empty value to clear
         })
+        Object.entries(this.extraInputAttributes).forEach(([name, value]) => {
+            removeButton.setAttribute(name, value)
+        })
 
         // Add keydown event listener to handle space key
         removeButton.addEventListener('keydown', (event) => {