React-quill: Error when modifying text in input: The given range isn't in document.

[paigeflourin]

Having this error:

The given range isn't in document

I used react quill as a component rendered inside a react table cell, and i have a requirement that users can search items from react table and modify it at the same time. this is what is happening:

when i modify the text inside the react quill editor it modifies fine but when i have a search filter and modify the text inside the editor i get this error.

this is my react quill component:

public setProps() {
  if (this.props.value === "<p><br></p>") {
    this.props.onChange("");
  } else {
    this.props.onChange(this.props.value);
  }
}

public handleChange(value) {
  this.props.onChange(value);
}

public render() {
  return (
    <div>
      <div className="text-editor" onBlur={this.setProps}>
        <ReactQuill
          value={this.props.value}
          onChange={this.handleChange}
          onBlur={this.setProps}
          modules={this.modules}
          formats={this.formats}
        />
      </div>
      <span className={styles.requiredLabel} style={style}>
        * required{" "}
      </span>
    </div>
  );
}

[wildlingjill]

@paigeflourin Can I ask how you fixed this? I'm getting a "given range isn't in document" error too and I'm trying to figure out what I'm doing wrong.