Not triggering onchange event

[w35l3y]

When choosing a date through datepicker, the onchange event of the input is not triggered. So it can not be used with React.

[w35l3y]

Actually, it does dispatch change event!

React works with SyntheticEvents. Native events doesn't call React Event Handlers. https://stackoverflow.com/a/39066491/157873

I really liked the simplicity of this polyfill, but now I don't know how to use it with React.

[melvey]

You can work around it by triggering the react event yourself.

// If we have a date input and it has a picker attribute bind the event
componentDidUpdate() {
    if(this.dateInput && this.dateInput.hasAttribute('data-has-picker')) {
        this.dateInput.addEventListener('change', this.startDateChanged);
    } 
} 

// Cleanup before re-render
componentWillUpdate() {
    if(this.dateInput && this.dateInput.hasAttribute('data-has-picker')) {
        this.dateInput.removeEventListener('change', this.startDateChanged);
    } 
} 

// In your render function store a reference to the polyfilled input
render() {
    return (
        <input
            type="date"
            value={startDate}
            onChange={this.startDateChanged}
            ref={(input) => { this.dateInput = input; }}
         />);
}