RAC Autofill doesn't work for Combobox #9057
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.
function ComboboxExample() {
const [formData, setFormData] = useState(new FormData());
return (
<form
className="p-1 w-fit"
onSubmit={(e) => {
e.preventDefault();
setFormData(new FormData(e.currentTarget));
}}
>
<fieldset className="border p-4">
<legend>User details</legend>
<TextField isRequired name="name" className="w-fit">
<Label>
Full name<span className="text-red-600">*</span>
</Label>
<Input autoComplete="name" className="px-2 border block" />
</TextField>
<ComboBox isRequired name="country" className="w-fit">
<Label>
Country code<span className="text-red-600">*</span>
</Label>
<div className="border">
<Input autoComplete="country" className="px-2" />
<Button>
<ChevronDown size={16} />
</Button>
</div>
<Popover className="shadow-xl bg-gray-100 border w-(--trigger-width)">
<ListBox>
<ListBoxItem
className="hover:bg-black p-2 hover:text-white hover:cursor-pointer"
id="SE"
>
SE
</ListBoxItem>
<ListBoxItem
className="hover:bg-black p-2 hover:text-white hover:cursor-pointer"
id="US"
>
US
</ListBoxItem>
</ListBox>
</Popover>
</ComboBox>
</fieldset>
<Button
type="submit"
className="border mt-4 hover:bg-black hover:text-white hover:cursor-pointer rounded-md px-4 py-2"
>
Submit
</Button>
<output className="block whitespace-pre mt-4">
{[...formData.entries()]
.map(([key, value]) => `${key}: ${value}`)
.join("\n")}
</output>
</form>
);
}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