Fix for HiddenSelect Component Auto-Completion Issue

[igorlima]

Closes #7660

Summary

This pull request addresses the issue #7660, focusing on fixing the value assignment in the HiddenSelect component within the @react-aria/select package. The changes ensure that the value attribute now defaults to the current value of selectRef when state.selectedKey isn't set. This should enhance the native browser autocomplete.

Changes Made

• File: packages/@react-aria/select/src/HiddenSelect.tsx
  • Updated the value property in the useHiddenSelect function to default to props.selectRef?.current?.value if state.selectedKey is unavailable.

Verification

• Checked that the HiddenSelect component now assigns the value attribute, and the fallback mechanism works as intended!
• Ensured that all existing functionality and behaviors are still intact and not affected by these changes.

Additional Context

When the browser triggers autocomplete, it first fills out the hidden select component before passing the value to the visible React Aria Select component. Unfortunately, there was a hiccup where the values weren't being passed down properly, which meant the select form field wasn't being filled out correctly by the native browser autocomplete.

• @nabanitabania has shared a lot of helpful details in the links below:
  • Browser autofill for React Aria Select is not working. #7660
  • Select Component Fails to Pass autoComplete Prop to HiddenSelect Component #7447
  • FIX- #7447: Passing autoComplete prop from Select to underlying child component #7452
• Below is a demo link to see the difference before and after the fix:

  • Demo Link - Inspired by the sandbox @nabanitabania shared in ISSUE-7660.

    • Before Fix	After Fix
      demo link	demo link
      native browser behavior wasn't working	native browser behavior works as intended

Feel free to share thoughts!

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

There isn't a specific React Aria form story to test this issue, but I've included a demo link to check it out. It was inspired by the sandbox that @nabanitabania shared in a previous PR.

🧢 Your Project:

[felipeac]

LGTM

[reidbarber]

LGTM, and thanks for the demo link!

[snowystinger]

Reading from a ref during render is typically unsafe and unfortunately it's hard to tell when it potentially breaks React's concurrent mode since they don't expose any of that for tests.

We should try to find another way to handle this.

does the hidden select fire an onChange that we aren't listening to? I'm worried that the state doesn't know about this value.

[igorlima]

Thank you for raising this concern!

This repository already has a lint rule to detect issues related to reading from refs during rendering. In my initial proposal, the lint failed because it did indeed read from a ref during render. However, I addressed this, and the lint has now passed.

• screenshot ^{lint fixed}

  

Regarding the use of selectRef, there are existing references to it in this function:

• Lines 73, 76, and 77.
• Additionally, line 74 calls useFormValidation and passes selectRef as a parameter. Within useFormValidation, ref is heavily used to access the ref's value.

@snowystinger given that the lint passes for this case and considering the function's existing use of refs, I believe it’s safe to use selectRef here. 🙏

[igorlima]

The concern that the state might not be aware of the value is valid. I added a debugger to the demo link to check everything is still working as intended. By opening the DevTools and triggering the native browser autocomplete, we can see that the value is set. Additionally, we can check all values when we submit the form.

• screenshots

  

  ---

  

  ---