Why does Chrome autofill not work on React?

Chrome writes a field's value directly to the DOM, but React only updates its state from a dispatched input event. Because the direct write skips that event, React's state stays empty even though the field looks filled.

Why is my submit button still disabled after autofill?

The button is gated on React state, not the visible value. Autofill changed the pixels but not React's state, so any validation tied to that state still sees empty fields and keeps the button disabled.

Does adding autocomplete attributes fix React autofill?

It helps the browser and assistive tech identify the field, per WCAG 1.3.5, but it does not change the event Chrome fires after filling. React still misses the update, so the attribute alone does not fix it.

Do I need to write code to use QuickForm?

No. Record Mode captures your keystrokes as you fill the form once, then replays them with the events React expects. No native-setter code, no CSS selectors, no config files.

Chrome Autofill Not Working on React? How to Fix It

React sits at the center of modern front-end work. In the State of JS 2024 survey it reached 82% usage among respondents, the highest of any framework (State of JS, 2024). Yet Chrome's built-in autofill, designed for static HTML, quietly fails on React's controlled inputs: the field looks filled, but the form behaves as if it is empty. The submit button stays disabled, and the user retypes everything.

Key Takeaways

Chrome sets a field's .value directly; React only reacts to the synthetic events that direct write skips, so its state never updates.

React reached 82% usage in the State of JS 2024 survey, so this hits most front-end teams.

You can fix it in code by calling the native value setter and dispatching an input event, or skip the code with a recorder-based extension.

The autocomplete attribute helps accessibility and field matching, but it does not make React see the value.

Why does Chrome autofill fail on React?

The failure is an event-timing mismatch, not a bug in either tool. React keeps form state in its own tree and updates that state only when it receives an input event from React's synthetic event system. Chrome's autofill writes straight to the DOM node's .value property and skips that event. React never hears about the change, so validation, derived state, and the submit button all stay stuck on the old empty value.

This is why "the field shows my email but the button is greyed out" is the signature symptom. The pixels updated; React's state did not. No Chrome release will change this, because React's controlled-input contract requires the event, and native autofill was never built to dispatch it. The same mismatch is why autofill also breaks on Angular, Vue, and Next.js.

How do you fix React autofill in code?

If you control the page, you can replay the value the way React expects, by using the prototype's native setter and then firing the event React listens for:

const input = document.querySelector("#email")
// React overrides the value setter, so reach the native one:
const nativeSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set
nativeSetter.call(input, "[email protected]")
// Now tell React, with the event it actually subscribes to:
input.dispatchEvent(new Event("input", { bubbles: true }))

That two-step pattern, set the value through the native descriptor then dispatch a bubbling input event, is the core of every React-aware fill. Skip the event and React ignores you; skip the native setter and React's overridden one swallows the write.

Does the autocomplete attribute fix it?

Not on its own. Adding autocomplete="email" is still worth doing: W3C's WCAG 2.2 criterion 1.3.5 Identify Input Purpose recommends it so assistive tech and password managers can recognise the field, which helps users with cognitive and motor needs (W3C). But the attribute only tells the browser what a field is for. It does not change which event Chrome dispatches after filling, so React's state problem remains untouched.

What does broken autofill cost your users?

Friction at the form is where conversions die. Across 93 million tracked sessions, Zuko found the average online form completes just 51.7% of the time, and form length is the single reason cited by 27% of people who quit (Zuko, 2025). When autofill silently fails on a React app, every field becomes manual again, which is exactly the length-and-effort friction that pushes that completion rate down.

The no-code fix: QuickForm Record Mode

Not everyone owns the page, and not every team wants to patch every form. A dedicated autofill extension for React does the same job as the snippet above. QuickForm's Record Mode captures your real keystrokes once, then replays them through the same native-setter-plus-input-event path React expects. State updates, validation runs, and the submit button enables, exactly as if you had typed.

Fill React forms in one click, free

No account required. Works in 60 seconds.

Add to Chrome, it's free

50,000+ users · 4.2 stars

Setting it up takes about a minute:

Install QuickForm from the Chrome Web Store (free, no account needed)
Open the React form you want to autofill
Click the QuickForm icon, then enable Record Mode
Fill the form once, normally. QuickForm captures every field
Save the profile and give it a name
Next time, click the profile and the whole form fills in one click, using the events React recognises