#StackBounty: #javascript #reactjs #forms #onchange #react-state Force input's onChange event bubble to parent form with the value …

Bounty: 50

Here is code snippet with the reproduction of the problem.

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”true”>

class CustomSelect extends React.Component {
  items = [
    { id: 1, text: "Kappa 1" },
    { id: 2, text: "Kappa 2" },
    { id: 3, text: "Kappa 3" }
  ]
  
  state = {
    selected: null,
  }
  
  handleSelect = (item) => {
    this.setState({ selected: item })
  }
  
  render() {
    var { selected } = this.state
    return (
      
{}} />
Selected: {selected ? selected.text : "nothing"}
{this.items.map(item => { return ( <button key={item.id} type="button" onClick={() => this.handleSelect(item)} > {item.text} </button> ) })} </div> ) } } class Form extends React.Component { handleChange = (event) => { console.log("Form onChange") } render() { return ( <form onChange={this.handleChange}> <label>This input will trigger form's onChange event</label> <input /> <CustomSelect name="kappa" /> </form> ) } } ReactDOM.render(<Form />, document.getElementById("__root"))
https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js


As you can see, when you type something in default input (controlled or uncontrolled, whatever), form catches bubbled onChange event. But when you are setting the value of the input programmatically (with the state, in this case), the onChange event is not being triggered, so I cannot catch this changes inside the form’s onChange.

Is there any options to beat this problem? I tried to input.dispatchEvent(new Event("change", { bubbles: true })) immediately after setState({ selected: input }) and inside it’s callback, but there is no result.


Get this bounty!!!