dispatchEvent on input/textarea is ignored #10135

fatfisz · 2017-07-10T16:32:09Z

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

What is the current behavior?
The dispatchEvent method has no effect on input/textarea elements.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/84v837e9/).
v. 15.5.4: https://jsfiddle.net/c8tp5mqf/ (working)
v. 15.6.1: https://jsfiddle.net/6bv1581z/ (not working)

What is the expected behavior?
The dispatchEvent method results in an event being handled.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I'm using the latest Chrome browser. This has worked in 15.5.x, stopped working in 15.6.0 and is still not working in 15.6.1.

Usecase for this: some old tests that I'd happily remove, but have to support for now.

The text was updated successfully, but these errors were encountered:

gaearon · 2017-07-11T10:10:52Z

cc @nhunzaker

gaearon · 2017-07-11T10:11:13Z

Oops, I meant to cc @jquense

jquense · 2017-07-11T11:46:46Z

Yes this is expected and unavoidable to some extent. React dedupe change and input events so they don't fire too often, in this case even tho you intentionally want to trigger the event react is swallowing it because it the input value has not changed. you can use the SimulateNative helper to get the behavior your looking for. Tho that will break again in v16

gaearon · 2017-07-11T11:51:29Z

What's the workaround?

gaearon · 2017-07-11T11:52:12Z

I guess this is grey area and unclear if we supported this. As @jquense mentioned you can use SimulateNative in the meantime. After 16, feel free to file a new issue and we'll look at other ways of handling this.

jquense · 2017-07-11T12:02:07Z

cypress-io/cypress#536 from an additional use case affected similarly. They outline their long term "workaround" as well.

I do think this falls into a gray area, complete transparent DOM interoperability is always nice but hard to do and potentially limiting give Reacts model for targeting and it :/

fatfisz · 2017-07-11T12:45:09Z

@jquense Btw. this happens no matter if the value is changed or not - I probably should've included that info in this issue.

I understand that this is unexpected (the event should not be swallowed by React if the value has changed), so I'm including an updated example: https://jsfiddle.net/6bv1581z/1/

fatfisz · 2017-07-11T12:53:25Z

I'll need some time to process the use case in cypress (esp. the part about the setters - don't really know what the spec says about this), so I'm not strongly opinionated for now.

In any case, the simulated thing seems to be working for now and the code that's using it waits for a rewrite, so that might be turned into a non-issue for me.

I'm just wondering - won't this affect the ability to make integration tests for React-based apps using the DOM api?

Sorry if that's all answered in the linked thread, I have yet to connect the dots.

fatfisz · 2017-07-11T13:20:40Z

Just leaving a solution for future reference (checked in Edge 15, IE 11, FF 53, Chrome 59):

function setNativeValue(element, value) {
  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
  
  if (valueSetter && valueSetter !== prototypeValueSetter) {
  	prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}

Use it like so:

setNativeValue(textarea, 'some text');
textarea.dispatchEvent(new Event('input', { bubbles: true }));

jquense · 2017-07-11T14:01:46Z

Btw. this happens no matter if the value is changed or not - I probably should've included that info in this issue.

Yes, i also left that bit off because its a bit hard to explain, but React tracks manual DOMNode.value changes as well, so when you do input.value ='foo' and then dispatch a change event React sees two discreet moments there, the first change and then the change via the event, so when your input event fires the value is still 'foo' and React says "I already know about that that value so this must be a duplicate"

I'm just wondering - won't this affect the ability to make integration tests for React-based apps using the DOM api?

It shouldn't, if you are using something like Selenium, which fires "real" events when you ask it too, vs "fake" ones we can fire in the DOM. Comparative tools like Cypress or nightmare, etc should use workarounds that mimic the real browsers behavior so if something breaks (as in this case) it was more of a bug in Cypress :)

kentcdodds · 2018-06-29T23:11:39Z

Hi friends! I think I must be doing something wrong, but I have a pretty simple demo of the setNativeValue function shown above and I'm getting an error.

In the example I'm getting an error that seems to indicate that the textarea does not have a property descriptor for value. I've tried an input. And the prototype has the same issue. It sounds like this is working for a lot of people so I'm assuming that I'm probably making a silly mistake, but it's so simple I'm not sure what I could be doing wrong.

To save you a click, here's the whole example:

<!doctype html>
<html>

<body>
  <textarea></textarea>
  <script>
    const textarea = document.getElementsByTagName('textarea')[0]
    function setNativeValue(element, value) {
      const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set
      const prototype = Object.getPrototypeOf(element)
      const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set
      if (valueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element, value)
      } else {
        valueSetter.call(element, value)
      }
    }
    setNativeValue(textarea, 'some text')
    textarea.dispatchEvent(new Event('input', { bubbles: true }))
  </script>
</body>

</html>

What am I missing?

kentcdodds · 2018-06-29T23:19:44Z

I'm not sure why I missed this or why this is, but it looks like there actually is a value setter on the prototype but there isn't always one on the element. So here's my adjusted version that works:

<!doctype html>
<html>

<body>
  <textarea></textarea>
  <script>
    const textarea = document.getElementsByTagName('textarea')[0]
    function setNativeValue(element, value) {
      const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}
      const prototype = Object.getPrototypeOf(element)
      const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}

      if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element, value)
      } else if (valueSetter) {
        valueSetter.call(element, value)
      } else {
        throw new Error('The given element does not have a value setter')
      }
    }
    setNativeValue(textarea, 'some text')
    textarea.dispatchEvent(new Event('input', { bubbles: true }))
  </script>
</body>

</html>

Good luck friends. Stay safe out there!

asliwinski · 2018-07-23T15:52:07Z

@fatfisz @kentcdodds Could you please show how to do this for radio inputs?

tkrotoff · 2019-06-11T16:49:48Z

Found another issue talking about this that proposes an alternative solution:

#11488 (comment)

/**
 * See [Modify React Component's State using jQuery/Plain Javascript from Chrome Extension](https://stackoverflow.com/q/41166005)
 * See https://github.com/facebook/react/issues/11488#issuecomment-347775628
 * See [How to programmatically fill input elements built with React?](https://stackoverflow.com/q/40894637)
 * See https://github.com/facebook/react/issues/10135#issuecomment-401496776
 *
 * @param {HTMLInputElement} input
 * @param {string} value
 */
function setReactInputValue(input, value) {
  const previousValue = input.value;

  // eslint-disable-next-line no-param-reassign
  input.value = value;

  const tracker = input._valueTracker;
  if (tracker) {
    tracker.setValue(previousValue);
  }

  // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
  input.dispatchEvent(new Event('change', { bubbles: true }));
}

Usage:

setReactInputValue(document.getElementById('name'), 'Your name');
document.getElementById('radio').click();
document.getElementById('checkbox').click();

addrexx · 2019-07-19T16:08:58Z

Hi Everyone,
Many of these solutions are working well in all browser except IE 10. Has anyone come across a solution or tweak to make any of these functions for setting an input work in IE 10?
Thanks!

hurrikam · 2019-09-03T09:09:56Z

I'm just wondering - won't this affect the ability to make integration tests for React-based apps using the DOM api?

It shouldn't, if you are using something like Selenium, which fires "real" events when you ask it too, vs "fake" ones we can fire in the DOM. Comparative tools like Cypress or nightmare, etc should use workarounds that mimic the real browsers behavior so if something breaks (as in this case) it was more of a bug in Cypress :)

Actually we're using a software implementation of the WebDriver interface in order to automate web apps on Smart TVs and other devices where no native WebDriver interface is available.
And we're hitting this issue indeed. :)

gmattie · 2020-02-25T21:43:20Z

In order to trigger an animation, my controlled text inputs were required to dispatch a change event by clearing their stateful values after the form data was validated and submitted. While the above solution works well, at least within my application, it was causing the following warning:

Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

Adding the dispatched event to the next available cycle in the event loop queue solved the issue:

//~

setTimeout(() => element.dispatchEvent(new Event("input", { bubbles: true })));

kentcdodds · 2020-02-25T21:46:03Z

Oh, kinda forgot about this issue, but now that I'm here I thought I'd mention that the change event in DOM Testing Library's fireEvent has this built-in :)

Implemented the AdminCredentials component and copied its ErrorResponse component styling to the Login component, which appropriately displays an "Invalid Credentials" error message outside of the relevant TextInput components group. Also, added a SetNativeValue utility function to dispatch "change" events on TextInput components when their values are cleared by updates to their state. For performance reasons React does not dispatch onChange or onInput events when a value of an HTMLElement is updated by state (RE: facebook/react#10135).

cbdeveloper · 2020-04-15T09:14:56Z

I just tried the _valueTracker solution and it does trigger the onChange handler. But I get caret position jump.

Here is my use case:

User types "," (comma) // I need to replace it with a "." (point)
onKeyDown does event.preventDefault()
onKeyDown ideally would fire a KeyBoard event that behaves exactly like if the user had typed "." (point), so that I don't get caret jumping issues.

Is this by any means possible?

Because if I'm going to deal with caret jumping anyway, I can always call my onChange function directly from my onKeyDown.

What I did so far:

function onKeyDown(event) {
    if (event.key === ",") {
      event.preventDefault();
      const previousValue = input_ref.current.value;
      const caretPosition = input_ref.current.selectionStart;
      const point = ".";
      const newValue = [previousValue.slice(0, caretPosition), point, previousValue.slice(caretPosition)].join('');
      
      input_ref.current.value = newValue;

      const tracker = input_ref.current._valueTracker;

      if (tracker) {
        tracker.setValue(previousValue);
      }

      input_ref.current.dispatchEvent(new Event('change', { bubbles: true }));
    }
  }

Coursemology uses React and simply changing the value attribute of the multiplier input will not change Coursemology's state. As such, every time an onChange event is fired from any text input (which in Coursemology's case, all has), all the values are re-rendered (since changing grades and multipliers ultimately affect EXP, and they must be displayed. This was an issue raised in React in 2017, but ultimately deemed as a security feature. To solve this issue, we will have to directly invoke the onChange event listener in the input prototype (as prescribed in coursemology.js in webpack output). Read more here facebook/react#10135 (comment)

itsalivenger · 2021-10-17T15:15:52Z

i have tried this with tiktok input for comment but they have a span nested in div continuously and the setNativeValue doesn't work for it because divs and spans doesn't have a .set property... anyone has any idea to make it work ?

obelixotic · 2022-01-18T21:27:44Z

Hi! Anyone tried the same thing for drop down menus built with React?

BonBonSlick · 2022-02-10T20:35:03Z

Hello, anyone knows why it all salvations above are not working with Redux state? https://codepen.io/eqwfsdgfdg/pen/MWOmaQJ

gaganmeet · 2022-07-25T05:45:10Z

I'm not sure why I missed this or why this is, but it looks like there actually is a value setter on the prototype but there isn't always one on the element. So here's my adjusted version that works:

<!doctype html>
<html>

<body>
  <textarea></textarea>
  <script>
    const textarea = document.getElementsByTagName('textarea')[0]
    function setNativeValue(element, value) {
      const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}
      const prototype = Object.getPrototypeOf(element)
      const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}

      if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element, value)
      } else if (valueSetter) {
        valueSetter.call(element, value)
      } else {
        throw new Error('The given element does not have a value setter')
      }
    }
    setNativeValue(textarea, 'some text')
    textarea.dispatchEvent(new Event('input', { bubbles: true }))
  </script>
</body>

</html>

Good luck friends. Stay safe out there!

Is there a similar workaround if its a contentEditable div?

locxiang · 2022-08-16T07:09:27Z

I need to know too. ；Is there a similar workaround if its a contentEditable div?

sohamsarkar1993 · 2022-08-19T13:34:21Z

bumping this for contentEditable div

maxwell-git · 2023-05-15T06:00:36Z

the code next is worked for me.

// a login form simulate 
const $ = document.querySelector.bind(document);
const username = $('[name=username]');
username.value = 'your username';
const password = $('[name=password]');
password.value = 'userpassword';
const button = $('button');

// find the key
const key = Object.keys(username).find(key=>key.includes('__reactEventHandlers'));
// invoke onchange
username[key].onChange({target:username});
password[key].onChange({target:password});

button.click()

mehdijalili2000 · 2024-02-09T08:50:39Z

Unfortunately, the proposed solutions did not work for Textara. The page for which I need this code is designed with React and works for all elements except textarea. I want to automatically enter values in the elements in Firefox and from the console. help me please

pwbriggs · 2024-02-12T23:17:46Z

Hey @mehdijalili2000, 👋

This is an old issue, and React has been updated since. How about you open a new issue for this bug?

Thanks! ❤️

mehdijalili2000 · 2024-02-13T05:26:46Z

hi. I know has been updated but i have this problem.

…

On Tue, Feb 13, 2024 at 2:48 AM Peter Briggs ***@***.***> wrote: Hey @mehdijalili2000 <https://github.com/mehdijalili2000>, 👋 This is an old issue, and React has been updated since. How about you open a new issue <https://github.com/facebook/react/issues/new/choose> for this bug? Thanks! ❤️ — Reply to this email directly, view it on GitHub <#10135 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATOY3EIMKW2NQBJWSGV4EKTYTKPK3AVCNFSM4DSMMFZKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJTHE3TMOBRGM3Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

pwbriggs · 2024-02-13T17:59:22Z

Cross-reference for future readers: see #28311.

mehdijalili2000 · 2024-02-16T15:18:39Z

hi. I know has been updated but i have this problem.

gaearon closed this as completed Jul 11, 2017

ikhilko mentioned this issue Aug 9, 2017

onChange event doesn't fire while trying to type value in input using Appium (IOS) #10347

Closed

aweary mentioned this issue Oct 4, 2017

Programmatically filled input does not fire onchange event #11095

Closed

rdandnayak mentioned this issue Mar 8, 2018

dispatchEvent has no longer any effect on latest react version #12344

Closed

morsdyce mentioned this issue May 9, 2018

Trigger simulated input value change for React 16 (after react-dom 15.6.0 updated)? #11488

Closed

kentcdodds mentioned this issue Aug 4, 2018

WIP: add setNativeValue for change event testing-library/react-testing-library#153

Closed

4 tasks

PMudra mentioned this issue Apr 2, 2019

Appium cannot type value into html input controlled by React >= 15.6.0 appium/appium#9002

Closed

JohnC-80 mentioned this issue Nov 19, 2019

TextField: Call onChange when cleared folio-org/stripes-components#1102

Merged

bluebill1049 mentioned this issue Dec 8, 2019

improve controlled component onchange with setValue react-hook-form/react-hook-form#635

Closed

lokesh-0813 mentioned this issue Dec 23, 2019

terra-search-field onChange not triggered when the value is set programmatically cerner/terra-core#2727

Closed

nfiacco mentioned this issue Feb 11, 2020

Provide a way to handle browser-autocompleted form values on controlled components #1159

Open

DerGut mentioned this issue Apr 23, 2021

[Question]: How to fill inputs with type "range"? microsoft/playwright#4231

Closed

lifeiscontent mentioned this issue Jul 6, 2021

React 17/18 custom Synthetic Events #21806

Open

fastfedora mentioned this issue Aug 3, 2021

ant design date input type does not work cypress-io/cypress#16061

Closed

lethaldose mentioned this issue Oct 19, 2021

Error while handling range element in react app getgauge/taiko#2173

Closed

inokawa mentioned this issue Feb 12, 2022

Expose setRangeText from component inokawa/rich-textarea#8

Merged

julienw mentioned this issue Mar 14, 2023

Todomvc react update WebKit/Speedometer#98

Merged

wassimbj mentioned this issue Jun 2, 2023

Automatic form submission wassimbj/searchgpt#1

Closed

mehdijalili2000 mentioned this issue Feb 16, 2024

Bug: Modify value of textarea value in react s page by javascript and select dropdown item by javascript #28311

Closed

joshuajaco mentioned this issue Jul 2, 2024

Select does not propagate change event adobe/react-spectrum#6217

Open

aegroto mentioned this issue Nov 13, 2024

fix: reply storage is updated with the new content on file upload stackernews/stacker.news#1585

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dispatchEvent on input/textarea is ignored #10135

dispatchEvent on input/textarea is ignored #10135

dispatchEvent on input/textarea is ignored #10135

dispatchEvent on input/textarea is ignored #10135

Comments