Firefox: Autocomplete/Autofill not working

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

[Hadsch]

Since this was closed, I opened a new one: https://github.com/facebook/react/issues/18986 Someone has linked this issue to it: https://github.com/facebook/react/issues/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 😭

[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!