Thanks for filing this Dominic. Could you provide an example where Chrome fails to autofill a form because of this? Also when you say "(e.g. email)" are you referring to a login form or an address form (e.g., in a checkout form when purchasing online)?

I can confirm that Chrome does fire change events. However those events aren't trusted events due to limitation on the iOS platform (Safari doesn't have those limitations). An example would really help us debug this issue.

dvadym@, does password manager use __gCrWeb.fill.setInputElementValue(...) for setting field values?

Hi, thanks for taking a look at this.

Whilst setting up a demo I realised something - this is actually working in iOS Chrome.

Why this has caused a discussion in the React community (https://github.com/facebook/react/issues/1159) is that iOS Chrome behaves differently to Desktop Chrome and most other browsers.

You can see the issue about that here: https://bugs.chromium.org/p/chromium/issues/detail?id=705275

I didn't realise that React onChange doesn't actually listed to the 'change' event! This has caused quite a lot of confusion.

Why this works in other browsers is that they are firing focus, keydown, input, keyup, change and blur. I believe React is using the 'input' event for onChange for some reason.

Please feel free to close this issue as the one linked above more accurately describes the issue.

For your reference here is a demo of it working natively but not in React I set up: https://kind-stallman-f3c045.netlify.com/

Thank you for the explanation Dominic. We did fix that behavior back in December. We now fire keydown, change, input, and keyup events.
https://chromium-review.googlesource.com/c/chromium/src/+/771674

We also had a fix for React.
https://chromium-review.googlesource.com/c/chromium/src/+/844324

while this does fix the autofill behavior, it still does not invoke the onChange handler.

Thanks for clarifying this. We're experiencing the same issue on Google Chrome with Autofill using React.

Great to hear that this has been fixed in Chromium. Is there a way to check when this fix will be available in Google Chrome? Thanks

Chrome 64 (chrome://version) should have the fix.

That's very strange because I am in fact on Chrome 64 for iOS and still experiencing the issue.

When a form in React is populated by Chrome's Autofill feature neither onChange nor onInput will be called.

On macOS Desktop (also Chrome 64) the problem does not appear. Also, on iOS Safari the issue does not exist.

I just added the "input" event to the native part of the test here: https://kind-stallman-f3c045.netlify.com/

And can confirm on Chrome 64 on iOS it does not fire an "input" event, only a "change". Hence why it still doesn't work with React onChange!

The reason is that React internally listens to the input event and maps that to the onChange event. I don't know why they do it but I think Chrome on iOS should fire an input event when Autofill is triggered.

I understand but it doesn't, in the example linked the non-react inputs are listening for change and input, and only change is fired

Chrome iOS does fire the input event.

https://chromium-review.googlesource.com/c/chromium/src/+/771674/14/ios/web/web_state/js/resources/common.js

I don't think the onChange event is broken because 'input' or 'change' events aren't fired. My suspicion is that React internally expects trusted events. Events created and fired in Javascript aren't trusted. Hence the events fired by Chrome iOS are ignored by React. I'm not familiar with React's implementation. If you are, could you please try to verify that?  

React was mounting on a different component, it's not react interfering with events - just to prove the case here is a version without any react or react libraries, purely native: https://kind-stallman-f3c045.netlify.com/native.html

Despite what the code PR says, if you autofill that in iOS Chrome 64 it only receives the change event. Autofill it in  Chrome Desktop or iOS Safari and it receives input, change, keyup and keydown.

I can only surmise that the change isn't in iOS Chrome, or it isn't working!

Here's a screenshot directly from my phone: https://i.imgur.com/yoPYcoe.png

And here's one from desktop Chrome macOS also v64: https://i.imgur.com/bMIDvOi.png

The fix isn't in Chrome 64. My bad. Chrome 65 will have (to be rolled out starting March 13th). I just tested your native events demo website and it works on Chrome 65. I appreciate you following up on this.

Aha! Cool thanks for checking it out and being responsive, look forward to the fix.

That‘s great news! Thanks a lot!

I am experiencing this issue on https://kind-stallman-f3c045.netlify.com/ with Chrome iOS 68.0.3440.70.

This is the first time I have run into the bug so not sure if it is specific to that version of Chrome iOS.

I also have it in 67 but the strange thing is that now Chrome does fire an
“input” event as you can see when auto filling the native inputs.

I’m going to have a dig into React to see why it’s not picking up that
input event since as far as I was aware it was listening for that in order
to fire the onChange event.

I do know that React attaches one handler on something top level like the
document and catches the events bubbling up but need to investigate further
as I don’t see why it wouldn’t catch that.

Do we have an ETA when this can be fixed? 

The Chrome iOS users of my app experience input fields that are already filled (that's good) but error messages saying the same fields are empty (super bad!). It looks like my app is very buggy when it's in fact chrome iOS that dont trigger events like any other browser :(