We have a relatively simple React component with an input element in it:
export class MyInput extends Component {
componentDidMount() {
function log(e) {
console.log(`Event: ${e.type}, isTrusted: ${e.isTrusted}, input value: ${e.target.value}`, e);
}
this.rawInput.addEventListener("change", log);
this.rawInput.addEventListener("input", log);
}
onChanged(e) {
console.log("raw-input.onChanged: e.target.value", e.target.value);
this.props.onChanged(e.target.value);
}
render() {
return (
<div className="my-class">
<input
value={this.props.value}
onChange={this.onChanged.bind(this)}
ref={(input) => { this.rawInput = input; }}
/>
</div>
);
}
}
Basically, this is just a slightly wrapped input element, while the logging added on top is for debug purposes.
It handles typing just fine in regular usage, it also handles SendKeys under Selenium WebDriver in Chrome, Firefox and IE 11 (provided that WebDriver's EnableNativeEvents is true).
However, when run in Internet Explorer 11 by WebDriver and with EnableNativeEvents = false, the onChanged event is not fired when SendKeys is executed. What's most weird is that the HTML input event is fired. Below is the console output:
Notice that the input's value is changing while "test" is being typed, but there's no onChange.
Below is an expanded input event in case of WebDriver:
If a user then types via keyboard in the same input, the onChange event is there:
Below is an expanded input event in case of user typing:
Close analysis shows that the only difference in the input events is that under WebDriver isTrusted: false, while on real typing isTrusted: true.
The question is why in the first case onChange events are not fired by React?
I assume this is because React skips events with isTrusted: false because this means they are simulated, not real user events. However, I was not able to find any proof for this. If it's the case, would you mind providing a link to a post or a line in React sources that handles it?
- React: 16.7.0
- Selenium.WebDriver.IEDriver: 3.14.0
