fix(Select): handle form autofill event (#2195)

kricsleo · web-flow · commit bd9dfaf10e3e · 2025-10-01T00:13:02.000+08:00
diff --git a/packages/core/src/Select/BubbleSelect.vue b/packages/core/src/Select/BubbleSelect.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { VisuallyHidden } from '@/VisuallyHidden'
+import { injectSelectRootContext } from './SelectRoot.vue'
 
 interface BubbleSelectProps {
   autocomplete?: string
@@ -16,6 +17,7 @@ interface BubbleSelectProps {
 
 const props = defineProps<BubbleSelectProps>()
 const selectElement = ref<HTMLElement>()
+const rootContext = injectSelectRootContext()
 
 // This would bubble "change" event to form, with the target as Select element.
 watch(() => props.value, (cur, prev) => {
@@ -32,6 +34,14 @@ watch(() => props.value, (cur, prev) => {
   }
 })
 
+/**
+ * Form autofill will trigger an `input` event on the `select` element.
+ * We listen to that event and update our internal state to support it.
+ */
+function handleInput(event: Event) {
+  rootContext.onValueChange((event.target as HTMLSelectElement).value)
+}
+
 /**
  * We purposefully use a `select` here to support form autofill as much
  * as possible.
@@ -49,6 +59,7 @@ watch(() => props.value, (cur, prev) => {
     <select
       ref="selectElement"
       v-bind="props"
+      @input="handleInput"
     >
       <slot />
     </select>
