Browser autofill for React Aria Select is not working.

[nabanitabania]

Provide a general summary of the issue here

The issue involves browser autofill not functioning correctly with dropdowns in React Aria. While the library's useHiddenSelect hook uses a visually hidden <select> element for autofill compatibility, the onChange handler in its selectProps does not receive the correct e.target.value when autofill is triggered. This is likely due to how the useEffectEvent hook manages event handlers, potentially causing synchronization issues between React's synthetic events and native browser autofill events. As a result, the dropdown's state fails to update with the autofilled value, disrupting expected behavior.

🤔 Expected Behavior?

When browser autofill is triggered on a dropdown using React Aria, the hidden <select> element should seamlessly integrate with the autofill functionality. The onChange handler within the useHiddenSelect hook's selectProps should capture the event and receive the correct value in e.target.value, reflecting the autofilled selection. This value should then update the component's state (state.selectedKey) to ensure the dropdown displays the autofilled choice accurately. The entire process should be smooth and consistent, aligning with native autofill behavior across all supported browsers.

😯 Current Behavior

Currently, when browser autofill is used on dropdowns in React Aria, the interaction breaks down at the onChange handler of the hidden <select> element. Instead of receiving the expected autofilled value, e.target.value is empty (""). This prevents the component's state (state.selectedKey) from updating to reflect the autofilled input. While the library's implementation attempts to handle autofill through the visually hidden <select>, it appears that native autofill events are not being processed correctly, leading to a disconnect between the browser's autofill mechanism and the component's event handling.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

-https://codesandbox.io/p/sandbox/focused-water-lhqtty

• Open the sandbox link and try autofilling the form using the browser's saved address.
• Open Developer Tools and navigate to the Sources tab.
• Locate HiddenSelect.mjs and useEffectEvent.mjs.
• Set breakpoints on:
  • The onChange function in HiddenSelect.mjs.
  • The line const f = ref.current!; in useEffectEvent.mjs.
• Trigger autofill and observe the behavior.
• Notice how the native event's value (e.target.value) is lost in the onChange handler, causing the dropdown state not to update.

Version

3.39.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response