Issue when inserting a div before an editable div (contentEditable)

[josdejong]

When I insert a new div before an editable div, preact throws an error. When clicking the button in this example:

class TestContentEditable extends Component {
  constructor (props) {
    super(props)

    this.state = {
      inserted: false
    }

    this.insert = () => {
      this.setState({inserted: true})
    }
  }

  render () {
    if (this.state.inserted) {
      // => this will insert a new div before the editable div, this gives an error
      return <div>
        <div>not editable?</div>
        <div contentEditable="true">edit here...</div>
      </div>
    }
    else {
      return <div>
        <div contentEditable="true">edit here...</div>
        <button onClick={this.insert}>Insert div before editable div</button>
      </div>
    }
  }
}

This throws the following error in Chrome:

preact.js:158 Uncaught SyntaxError: Failed to set the 'contentEditable' property on 
'HTMLElement': The value provided ('null') is not one of 'true', 'false', 
'plaintext-only', or 'inherit'.

See also this similar virtual-dom issue: Matt-Esch/virtual-dom#176

[josdejong]

Nevermind, I see I didn't use the latest version of preact, and this issue is fixed in v5.6.0...

I'm really happy with preact btw, thanks! :)

[developit]

Oh wow, that's awesome! Thanks for the issue report anyway, I'll try to add a test for this so that future changes to this stuff don't break your use-case. Cheers!

[josdejong]

Thanks!