React: Programmatically filled input does not fire onchange event

Created on 4 Oct 2017 · 10Comments · Source: facebook/react

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

What is the current behavior?
React 15.6.0 generated input DOES NOT fire onchange event when programmatically filled. (DEMO)

What is the expected behavior?
React 15.5.4 generated input DOES fire onchange event when programmatically filled. (DEMO)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

The reported bug has been tested in Chrome 61.0.3163.100 and Safari 11.0 on macOS 10.13. Both experience the bug.
The bug was not present in React 15.5.4.
My core goal is to create a browser bookmarklet that auto-fills a form within my React app.

DOM Needs Investigation

Source

dcalhoun

👍2

Most helpful comment

@dcalhoun here's an example showing how the workaround @gaearon linked works with your 15.6 example: https://jsfiddle.net/oavm1px8/

Hope that helps!

aweary on 5 Oct 2017

👍2

All 10 comments

cc @jquense

gaearon on 4 Oct 2017

This is a duplicate of https://github.com/facebook/react/issues/10135, manually calling dispatchEvent on a controlled input will no longer work due to the heuristic we use to dedupe change events.

aweary on 5 Oct 2017

Then this workaround should be helpful: https://github.com/facebook/react/issues/10135#issuecomment-314441175

gaearon on 5 Oct 2017

🎉1

@dcalhoun here's an example showing how the workaround @gaearon linked works with your 15.6 example: https://jsfiddle.net/oavm1px8/

Hope that helps!

aweary on 5 Oct 2017

👍2

Thank you so much for the help! Your example should allow me to accomplish what I need. Sorry for the duplicate.

dcalhoun on 5 Oct 2017

@aweary good stuff mate!!
A little problem, when it's called on a new tab opened programmatically it works well on every browser except on IE.
Any help on making it work on that awful browser too?
Many thanks!! :)

Here is my stacko about it:
https://stackoverflow.com/questions/51332296/on-edge-ie-unable-to-fill-textarea-of-react-application-opened-in-a-new-window

mycatnamedweb on 13 Jul 2018

@aweary works fine, much appreciated, but I don't understand this part:

if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }

It basically says "if there is no valueSetter, then go and call it"..

loopmode on 7 Oct 2019

@loopmode Looks like a bug to me too.

if (valueSetter) {
    prototypeValueSetter.call(element, value);
}

This does the same as the code above

VarunAgw on 12 Mar 2020

The jsfiddle from above works fine with input fields but spits out an VM1149:3 Uncaught TypeError: Cannot read property 'set' of undefined with <select> fields