React - onChange event for contentEditable attribute

user_13694078 0
Viewed 5063

I want to use <div onInput={onChange} contentEditable> to save user input like textarea does. I've heard that I need to use onInput listener to trigger fn when input change. The problem is when I update text with React state, It moves the caret to beginning of text constantly

this is my code

import React from "react";

const App = () => {
  const [value, setValue] = React.useState("I am edittable");
  const onChange = (e) => {
    const html = e.target.innerHTML;
    setValue(html);
  };

  return (
    <div onInput={onChange} contentEditable>
      {value}
    </div>
  );
};
export default App;

codesandbox https://codesandbox.io/s/react-editable-cell-pwil6?file=/src/App.js:0-310

how could I fix it ?

reactjs contenteditable input
3 Answers

this has a solution, but onChange doesn't register the event. It won't change the state. Do not use it!

My suggestion is to use onInput, but DO NOT use the state variable as innerHTML for the editable element.

Put some default value, the contentEditable will handle the change of the innerHTML, while the onInput will handle the change of the state from the value of the innerHTML.

If you want to be sure that innerHTML will not be empty you can add onBlur event, that checks if it is ==="" and will update it with the default value or something else, etc.

user_74620190
user_115377400

This is old, but I just solved this for myself, and I thought I'd share it.

onChange will never fire, and onInput isn't the best way. You need to simulate onChange with onFocus and onBlur.

Copy the value of the innerHTML to a variable when onFocus occurs.

When onBlur occurs, test innerHTML against the variable to see if it changed. If so, do your onChange stuff. You need something like this:

  const onFocus = (e) => {
    val_start = e.target.innerHTML;
  };
  const onBlur = (e) => {
    if(val_start !== e.target.innerHTML) {
      //Whatever you put here will act just like an onChange event
      const html = e.target.innerHTML;
      setValue(html);
    }
  };
user_144087790
Related