10.0.0-alpha.2 - <input onChange> normalization?

Calling setState in a onChange callback of <input type="text"> doesn’t update that input as in React’s controlled component pattern.

I use this to give feedback to the user when an invalid value is entered by resetting it to the last valid value.

Example: Typing something into the form and pressing Enter correctly updates the state. Entering XYZ and pressing Enter doesn’t update the state but also doesn’t reset the input element.

import { Component, render } from "preact";

class App extends Component {
  state = { text: "X" };

  render() {
    return (
      <div>
        {this.state.text}
        <br />
        <input
          type="text"
          value={this.state.text}
          onChange={e => {
            if (e.target.value !== "XYZ") {
              this.setState({
                text: e.target.value
              });
            } else {
              this.setState({
                text: this.state.text
              });
            }
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Works with "preact": "^8.0.0": Codesandbox: https://codesandbox.io/s/kmn5400y2v

[mischnic]

This was indeed fixed together with #1324 🎉

[developit]

Preact does not normalize onChange to use onInput behaviour. If you include preact/compat in your project it will do so, but the default is to treat events as they exist in the DOM. The reason it worked in some Preact 8 apps was because compat patched it for all VNodes rather than only patching React.createElement.

In general, it’s recommended to use onInput for this reason: https://codesandbox.io/s/ll0n7j27nz