ContentEditable should display only `html` prop as value.

[Rahul-Sagore]

trafficstars

I've ran into an issue where I had validations like allowing only n characters in the ContentEditable, so I had a code like:

onTextChange({ target }) {
  if (target.value.length > 300) return;
  this.setState({ editableText: target.value })
}

and render method:

<ContentEditable
   innerRef={ this.contentEditableRef }
   html={ this.state.editableText }
   onChange={ this.onTextChange }
/>

Now I expected that ContentEditable is depending on editableText, so if I don't change the state, it won't reflect. But it did not work, ContentEditable was rendering content event if editableText was not changed.

Same thing happened with Pasting large content.

[alexgurr]

Same issue, but I'm trying to use this as a number input, with some sanitisation of the content before updating the passed value. Seems this is ignored though.

I have come up with a workaround which will address this. Feel free to add it an as an example to the readme. This example shows how you'd make a number only content editable input.

function onChange(onChangeNumber, max) {
  return ({ target: { value } }) => {
    onChangeNumber(Number(value) || 0);
  };
}

function sanitiseInput(value) {
  return (e) => {
    const { key } = e;

    if ((key === 'Backspace' && value !== 0) || !Number.isNaN(Number(key))) { return; }

    e.preventDefault();
    e.stopPropagation();
  };
}

// render
<ContentEditable
  html={`${value}`}
  tagName="span"
  onChange={onChange(onChangeNumber)}
  onKeyDown={sanitiseInput(value)}
/>

[LouisSayers]

I also ran into this. While playing around I discovered it was sticking <br>'s into my input as well (I'm putting a hard limit on number of characters).

Unfortunately my solution was to revert back to using a simple <input> element...