contentEditable value is getting wiped out (question)

I am not sure what I am doing wrong but certainly contentEditable value is getting reset on blur. Sorry for stupid question (I did search but did not find anything related to it.) also it is working in React set up but not in this setup

To reproduce JSfiddle https://jsfiddle.net/q4bbceg2/1/

problematic part of code is this

class ChildComponent extends Component {
 constructor() {
    super();
    this.state = {
      inputActive: false,
    };
  }
	render() {
   
		return ( <div
          role="button" style="border:1px solid red;"
          tabIndex="0"
          onFocus={() => { this.setState({ inputActive: true }); }}
          onBlur={() => { this.setState({ inputActive: false }); }}
          ref={(e) => { this.userInput = e; }}
       
          contentEditable="true"
          placeholder="Write a reply..."
          className="sc-user-input--text"
        >AAA
        </div>)
	}
}

I just wondering what I am missing here, if someone can point me in right direction it would be great.

Here is the same code in react https://jsfiddle.net/69z2wepo/173750/

[yaodingyd]

In react diffing is done with comparing two vnodes, so in react, state change triggers a rerender, but vnode has not changed, so no changes applies to DOM, thus your own change to DOM preserves.

But in preact diffing is done with DOM node reference and vnode. In rerender preact would think vnode has changed thus a update on DOM, which applies the original vnode to DOM.

[marvinhagemeister]

@paritoshmmmec The safest way to do it in both react and preact is to store the content inside the components state. Here is the fixed version of your fiddle: https://jsfiddle.net/q4bbceg2/4/

class ChildComponent extends Component {
  this.state = {
    value: "AAA",
  };

  render() { 
    return (
      <div
        onBlur={() => this.setState({
          // update text value
          value: this.userInput.textContent
        })}
        ref={(e) => { this.userInput = e; }}
        contentEditable="true"
      >
        {/* Always renders the correct value, now diffing works as expected */}
        {this.state.value}
      </div>
    );
  }
}