Bug: Firefox: Autocomplete/Autofill still not working

[Hadsch]

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):

• Firefox: Autofill not working mui/material-ui#16943
• Input autocomplete does not work in Firefox. ant-design/ant-design#21232

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.

[eddyw]

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:

react/packages/react-dom/src/client/ReactDOMInput.js

Line 420 in 1d85bb3

node.defaultValue = toString(value);

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]

If anyone interested, I opened this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1642570
😅

[mnoorenberghe]

I believe this is a duplicate of #15739

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[jan-wilhelm]

bump

[ahoisl]

Firefox seems to have fixed this a while ago in FF 105, see https://bugzilla.mozilla.org/show_bug.cgi?id=1642570

Tested it with FF 114 and works just fine 👍

[tripolskypetr]

Looks like all these methods with autofill prop are simple ignored by Google Chrome since 2022. I suggest a different method: using readOnly={true} until focus event

Keep in mind that on mobile safari keyboard will not shown if input field change readonly state after focus event, so you need to process onTouchStart too. Heres the link to the source code of usePreventAutofill hook

import { usePreventAutofill } from 'react-declarative';

...

const preventAutofill = usePreventAutofill();

...

return (
  <InputBase

      ...

      {...preventAutofill}
  />   
);
 

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!