adobe / adobe/react-spectrum

RAC Autofill doesn't work for Combobox

Open
#9,057 1 comment 0 reactions 0 assignees View on GitHub
bug
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.

Image

## Autofilling values and submitting

Notice how it submitted despite being required but there's no value for country.

Image

### 💁 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.