Preact: Preact remounts nodes when a child element is perpended

Created on 11 Nov 2016 · 6Comments · Source: preactjs/preact

Hello!

I have an issue with Preact where Preact remounts my nodes in the DOM whenever a new node is prepended(an ELEMENT_NODE, not TEXT_NODE). This causes css transitions to break.

If my DOM tree looks like this:

<div id="parent">
  <div id="childA"></div>
  <div id="childB"></div>
</div>

And i then prepend a child via a Preact component, it will now look like this:

<div id="parent">
  <div id="newChild"></div>
  <input type="checkbox" id="childA-with-transition"></div> // removed and then placed into dom again
  <div id="childB"></div> // removed and then placed into dom again
</div>

This is troublesome because CSS transitions are broken. Let's say i have a smooth transition on my checkbox and as i check the checkbox something is prepended(It could be an error message) then the css-transition would be interrupted because the DOM node is remounted.

Watch(in chrome debugger) as the <input> element is remounted into the DOM whenever <span>Required field</span> is prepended. This example has react aliased to preact-compat:

import React from 'react';

class Field extends React.Component {
  constructor () {
    super();
    this.state = {checked: false};
    this.onChange = this.onChange.bind(this);
  }
  onChange () {
    this.setState({checked: !this.state.checked});
  }
  render () {
    const {checked} = this.state;
    return (
      <div>
        {checked ? '' : <span>Required field</span>}<br />
        <input type="checkbox" onChange={this.onChange} value={checked} />
      </div>
    )
  }
}

export default Field;

bug has fix important

Source