Not getting any data when using Safari autofill

[mciparelli]

I've updated my inputs using Safari autofill. Then I click on my form's submit button and I get no data onSubmit, I should be getting the autofilled values. I think this happens specially in Safari, I'm using Safari 8.

[kristian-puccio]

I've been thinking about this and one way of implementing this is to have the input have a getDomValue function that is called either on change or on blur (if you wish to delay validation showing until they tab off).

Then when the form submit hapens it runs though all the inputs calling the getDomValue function before the onSubmit functions are called.

[twisty]

There's an interesting approach using the -webkit-autofill selector that may be worth examining. See: appsforartists/gravel@d868d68

See also:

• Provide a way to handle browser-autocompleted form values on controlled components facebook/react#1159
• http://stackoverflow.com/questions/11708092/detecting-browser-autofill/
• https://github.com/tbosch/autofill-event

[kristian-puccio]

I think the best approach is to get the DOM values on submit. It mimics the behaviour of a statically posted form.

One of the reasons is that not all browsers support the auto fill events and the ones that do seem to use different events.

I have actually implemented this in a flux based form that I've created. I used signal.js to register a function on each of the input that is run on submit. I'm suspecting as each input is registered with a parent form object here that that approach isn't necessary.

[christianalfoni]

Hi guys!

Hm, that kinda sucks. The really good thing about React is that the UI is a reflection of the state in the components, not the other way around. It is also an issue that we do want to know exactly when the inputs are filled, as it should trigger validation...

And this seems to be a browser issue, as autofill should trigger a change event. If it does not trigger any event it is impossible for Formsy to run its validations, even though we could grab values from inputs on submit.

hm hm, what a pickle... have to think about this, though it might be better to push the browser vendors to implement this correctly.

[webmasterkai]

This is the sledgehammer solution. When added to the input component it will check for a new value every 250ms and update the component value if it finds something new.

  lookForChanges: function() {
    var fieldVal, name, stateVal;
    name = this.props.name;
    fieldVal = this.refs[name].getDOMNode().value;
    if (!fieldVal) {
      return;
    }
    stateVal = this.getValue();
    if (stateVal !== fieldVal) {
      this.setValue(fieldVal);
      return console.log(fieldVal);
    }
  },
  componentDidMount: function() {
    var pauseBetweenCheck;
    pauseBetweenCheck = 250;//ms
    this.interval = setInterval(this.lookForChanges, pauseBetweenCheck);
    return;
  },
  componentWillUnmount: function() {
    return clearInterval(this.interval);
  }

[christianalfoni]

Well, we could add a property to the form which will check the inputs. Something like <Formsy.Form autorefill></Formsy.Form>, which would trigger this manual check of the inputs.

The problem is that formsy elements are not only typical form inputs, they can be anything really. So a better approach might be to add a method to the mixin: componentDidMount() { this.checkAutoRefill(this.refs.input) }. Which of course unregisters on unmount.

What do you think?

[mciparelli]

I opened the bug because at first I thought it was related to the library. Now you've given your opinion @christianalfoni and I agree with you. I don't think you should pollute the library with a solution browsers should give us. I think it's better to just listen on input changes before submit in our form wrappers (although ugly), and when browsers all agree on which event should be fired when an autocomplete is performed, then we'll be able to remove that code. Feel free to close the issue if you agree with me on this.

[christianalfoni]

I do, thanks for putting focus on this though :-)

[achtan]

here is my hack for text input:

<FormsyText
                  ref={(c) => {setTimeout(() => {c.setValue(c.muiComponent.input.value)}, 500);}}
                  name="email"
                  required
                  validations="isEmail"
                  floatingLabelText="Email"
                  hintText="email@domain.com"
                  fullWidth={true}
                />

i am using formsy-material-ui

but this still not enough for password field :(