RAC Autofill doesn't work for Combobox
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
The Chrome browser's autofill feature doesn't work properly with Combobox. When autofilling a form with a Combobox in it then the following will happen:
* The text input of the combobox gets filled
* No value gets selected even if it matches a valid option
Then when submitting this actually causes a required Combobox to be submitted despite having no value set.
### 🤔 Expected Behavior?
* Expect Combobox to fill out and attempt selecting a value.
* Expect a required Combobox to not be able to submit without a selected value.
### 😯 Current Behavior
## Manually inputting values and submitting
This is for comparison.
## Autofilling values and submitting
Notice how it submitted despite being required but there's no value for country.
### 💁 Possible Solution
I haven't looked at it that much, but an external fix if anyone else comes upon this issue is creating the classic animation for autofill using css and then triggering a selection based on that. This is obviously just a workaround and surely doesn't work in all situations.
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
* Create a submittable form with TextInput and Combobox in it
* Set TextInput and Combobox to some autocomplete value, like name and country
* Autofill by clicking in the TextInput
* Submit the form
## Sample code
Here's some sample code that I used in a vanilla vite react project + tailwindcss for styling.
```tsx
function ComboboxExample() {
const [formData, setFormData] = useState(new FormData());
return (
{
e.preventDefault();
setFormData(new FormData(e.currentTarget));
}}
>
User details
Full name*
Country code*
SE
US
Submit
{[...formData.entries()]
.map(([key, value]) => `${key}: ${value}`)
.join("\n")}
);
}
```
### Version
1.13.0
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
macOS Tahoe 26.0.1
### 🧢 Your Company/Team
Thomson Reuters
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.