React: Bug: Firefox: Autocomplete/Autofill still not working

Created on 23 May 2020 · 3Comments · Source: facebook/react

Description, steps to reproduce and sandbox example see #17022!
The native autocomplete function from firefox is still not working.

This also affects other frameworks (antd, material UI):

It would be nice if someone of the react community could give it a shot because I think that the native autocomplete is a very important UX feature.

Unconfirmed

Source

Hadsch

Most helpful comment

I've looked into this and it seems to happen because React sets the defaultValue of the input DOM node to the current value for controlled inputs. When you submit something in Firefox where node.value === node.defaultValue it doesn't save it for autofill. It's not documented anywhere, I just found out testing (without React too).

Removing this ""solves"" the issue:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

The reason why React does assign the defaultValue to the current value is because if you have an input with type="reset" and you click it, you'd get blank fields in your controlled inputs if you removed that line (next re-render would fix them though). At least it's what I understand by browsing through the code.

You could make autocomplete/autofill work on Firefox on a controlled input by making defaultValue return an empty string:

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }

This works as long as you don't have a type="reset". Otherwise you'll notice that all fields are reset as blank (next re-render fixes them though). I wouldn't recommend this though, it's a "hack" and I haven't used it anywhere to be able to say that it's 100% reliable.

Anyways, this is probably a bug in Firefox .. or a feature-(bug?) but I haven't found anything in the specs, MDN, or elsewhere that describes why node.value === node.defaultValue should bail out of saving for autofill 🤷‍♀️

I am/was working on a PR to solve this .. but, maybe Firefox could solve it on their side? 🙈 (unclear if it's a bug)
It'd be great to know if anyone from React core team is aware of the issue and/or what we could do about it.

Edit: this is a demo that demonstrates the issue in Firefox. It's plain HTML + 3 line JS code:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
So it isn't a React issue per se 🤔

eddyw on 30 May 2020

👍3

All 3 comments

Removing this ""solves"" the issue:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

You could make autocomplete/autofill work on Firefox on a controlled input by making defaultValue return an empty string:

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }