Preact: Position of last child changes on state change

[mischnic]

Take a look at the code and the GIF.

This has something to do with the second component (Entry), merging the two works fine (replacing <Entry> with the body of the function).

https://codesandbox.io/s/ykzj0o7r4z

import { h, render, Component } from "preact";

const Entry = props => (
  <div style={{ padding: "10px" }}>
    {props.children}
    <button onClick={props.add}>Add</button>
  </div>
);

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

    this.state = {
      values: ["abc"],
      i: 0
    };
  }
  render() {
    return (
      <div>
        {this.state.values.map(v => (
          <Entry
            add={() => this.setState({ values: [...this.state.values, "xyz"] })}
          >
            {v}
          </Entry>
        ))}
        <button onClick={() => this.setState({ i: this.state.i + 1 })}>
          Update
        </button>
        <button>First Button</button>
        <button>Second Button</button>
        <button>Third Button</button>
      </div>
    );
  }
}

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

10.0.0-beta1

[JoviDeCroock]

Been testing this and this seems to be a regression introduced in our latest version, will check this out. Thanks again for the great workable example!

The issue is located here: https://github.com/developit/preact/blob/master/src/diff/children.js#L76

We see the array length has changed and are trying to determine if an offset has happened to avoid losing focus on input elements.

[marvinhagemeister]

@JoviDeCroock great detective skills👍