0

"react": "^15.4.2"

I am having trouble triggering the change event from jquery for an input rendered with React. I need to do this for some end to end testing.

here's a sandbox as a full showcase: https://codesandbox.io/s/pp1k1kq3om with jquery already loaded.

If you run : $('#reactSlider').val(50).change() in the console, you'll notice that the change handler isn't called.

In the sandbox above there's also a pure html slider for comparison, that one works as expected (change function is called).

also tried to dispatch a new event like this:

var event = new Event('change')
var target = $('#reactSlider')[0];
target.dispatchEvent(event);

The above doesn't work either (and does work on the pure html slider).

import React from "react";
import { render } from "react-dom";

const changeHandler = event => {
  alert(`react slider changed:${event.target.value}`);
};

const App = () => (
  <div>
    <label htmlFor="reactSlider">react-slider</label>
    <input
      id="reactSlider"
      type="range"
      onChange={changeHandler}
      min={10}
      max={100}
      step={10}
      value={20}
    />
    <p>run in the console: $('#reactSlider').val(50).change()</p>
    <br />
    <br />
    <p>Notice that for the React slider, the change event is not triggered.</p>
  </div>
);

render(<App />, document.getElementById("root"));
Radu Luncasu
  • 975
  • 10
  • 17
  • jQuery registers/handles its own event listeners and does not call non-jQuery event listeners when called programmatically. – mhodges Apr 11 '18 at 19:47
  • The best thing to do here would be to have a single function that executes whatever you want to execute on the change, and call that function from within your `changeHandler` and also call it independently when you change the value programmatically. If you need to be able to handle change events from the console, set up a separate jQuery event handler that captures the change event and then call your function from within there – mhodges Apr 11 '18 at 19:51
  • @mhodges unfortunately, doing what you suggested would defeat my testing purpose, I'm looking for a way to interact with the react rendered input and trigger it's react change event listener. Any chance of being able to do that ? – Radu Luncasu Apr 11 '18 at 20:00
  • Possible duplicate of [How can I trigger an onchange event manually?](https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually) – mhodges Apr 11 '18 at 20:09
  • doesn't look like a duplicate, i've tried dispatching a new event, still doesn't trigger the react event listener. – Radu Luncasu Apr 11 '18 at 20:45

1 Answers1

0

Ok, so I've found sort of a workaround. it looks like the onInput event can be triggered just fine. In the case of input type='range' the "input" event is triggered in the same situation as the "change" is so I was able to switch it.

Workaround would be: use onInput instead of onChange and trigger it like this:

function triggerChange(selector,evt) {
    let ev = new Event(evt, { bubbles: true });
        let el = $(selector)[0]

        el.dispatchEvent(ev);
  };
triggerChange('#reactSlider','input');
Radu Luncasu
  • 975
  • 10
  • 17