Extra event incorrectly triggered

Clicking on Button 1 causes both onButton1Click() and onButton2Click() to be triggered. Only onButton1Click() should be called if Button 1 is clicked. Interestingly, setting the key on the div containing Button 2 prevents this issue from happening.

Same code works as expected with React and testing indicates that the issue was introduced in Preact 5.x.

Here’s a demo of the issue on jsfiddle.

import { Component, render } from "preact";

class App extends Component {
  constructor(props) {
    super();

    this.state = {
      showSection: true
    };
  }

  render() {
    const section = (
      <div>
        <div />
        <div>
          <div onClick={this.onButton1Click}>Button 1</div>
        </div>
      </div>
    );

    return (
      <div>
        {this.state.showSection && section}
        <div>
          <div>
            <div />
          </div>
          <div onClick={this.onButton2Click}>Button 2</div>
        </div>
      </div>
    );
  }

  onButton1Click = () => {
    console.log("button 1 click");
    this.setState({ showSection: false });
  };

  onButton2Click = () => {
    console.log("button 2 click");
  };
}

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

[maltium]

Tested this on Preact 10 alpha0, and it’s still happening.

https://codesandbox.io/s/vj1p70kz4y

[developit]

I haven’t fully finished looking into this, but if it’s recycling-related, there’s no recycling whatsoever in the upcoming major update. Let’s hope this goes away then!