Firefox: Autocomplete/Autofill not working

[Hadsch]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Firefox doesn’t show any autofill suggestions on an input field with type "text" as soon as you connect the state with the attribute "value"

Reproduce
https://codesandbox.io/embed/material-demo-y5mlt

• Open the provided sandbox example
• Write test in both input fields
• Press button
• Write t in both text fields

Important: This works corretly in Chrome but not in Firefox!

What is the expected behavior?
Autofill suggestions should be visible in Firefox too!

Autofill is working (FF + Chrome) if value is handled by the browser

  <input
        id="component-simple1"
        autoComplete="on"
        onChange={handleChange}
      />

Autofill is NOT working (FF) if value is handled by React(!)

    <input
        id="component-simple1"
        autoComplete="on"
        onChange={handleChange}
        value={name}
      />

Some pictues which show the wrong behavior
It is working as long as React does not handle the value with the state of the component (upper input field):

The input field where React handles the value (value={name}) doesn't show autofill suggestions

Version

Tech	Version
React	latest (see Sandbox)
Browser	Firefox 68.0.1(latest)
OS	tested on Windows

[ghost]

This is because of the difference in the browser's implementation, isn't it?

[Hadsch]

@kidkkr: I asume yes!
But the key point is, that the native autofill option should work in every browser.
I've tested Firefox and Chrome. Chrome works fine and FF not.

Other user may can test with the js fiddle other browsers and OS too.
This might be helpful for the react team!

[abrahamwilliam]

I have checked in Chrome and Mozilla Firefox,
In Chrome, everything works fine
In Mozilla,
When the input has the attribute type "value" , autocomplete seems not to work, when removed the "value" attribute from the input in the form , it works fine.

Seems to be a bug with Mozilla,

[Hadsch]

@abrahamwilliam
Firefox's works fine, because without React autocomplete works fine with FF.

IF you're using React and link the html value attribute too the React state THEN it stops working

[Hadsch]

Workaround

If you need the native autofill from Firefox you are currently not allowed to use the attribue value (value={name})!

Instead you have to use useRef={inputEl} and get the value from there, with inputEl.current.value

Here is an updated code sample: https://codesandbox.io/s/material-demo-6vhdk

export default function ComposedTextField() {
  const inputEl = useRef(null);

  function handleChange3(event) {
    setName3(event.target.value);
  }

  function handleSubmit(event) {
    console.log(inputEl.current.value);
  }

<input
   id="component-simple3"
   ref={inputEl}
    autoComplete="on"
    onChange={handleChange3}            
/>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

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!

[cameronspeakflash]

This is still a problem

[Hadsch]

I know... I don't know why nobody in the react community is reacting to it!
For me its a major bug if you destroy the native browser autofill functionallity from the browser!

[MufassirShaw]

Any updates on this? I'm using mui's TextField so there is no way for me to remove the value attribute. Can anybody look at this please? Thanks

Workaround

If you need the native autofill from Firefox you are currently not allowed to use the attribue value (value={name})!

Instead you have to use useRef={inputEl} and get the value from there, with inputEl.current.value

Here is an updated code sample: https://codesandbox.io/s/material-demo-6vhdk

export default function ComposedTextField() {
  const inputEl = useRef(null);

  function handleChange3(event) {
    setName3(event.target.value);
  }

  function handleSubmit(event) {
    console.log(inputEl.current.value);
  }

<input
   id="component-simple3"
   ref={inputEl}
    autoComplete="on"
    onChange={handleChange3}            
/>

[Hadsch]

Since this was closed, I opened a new one: #18986
Someone has linked this issue to it: #15739
There you find another workaround: https://jsfiddle.net/bootleq/hos4r6qd/

Maybe this works for you.

Sadly, Firefox won't change its behaviour and on the React side, no one reacting ;(

[JavaGalaxy]

still an issue in 2022

[jackromo888]

Kool

[ahoisl]

Sadly, Firefox won't change its behaviour and on the React side, no one reacting ;(

Just as an update: Firefox seems to have implemented a fix scheduled for FF 105, see here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1642570

You might want to give it a shot 😄

[Hadsch]

There is also a React Fix for it:
toptal/picasso#2698