Custom Editing Area losing focus in React 16 #309
Description
I have noticed an issue after upgrading to React 16. I have a React Quill component that is being managed by the parent.
class Editor extends Component {
constructor(props) {
super(props);
this.handleOnChange = this.handleOnChange.bind(this);
this.handleOnBlur = this.handleOnBlur.bind(this);
}
handleOnChange(html, delta, source) {
const { onChange } = this.props;
if (source === 'user') {
onChange(html);
}
}
handleOnBlur(range, source, quill) {
const { onBlur } = this.props;
if (source === 'user') {
onBlur(quill.getHTML());
}
}
render() {
const { value } = this.props;
return (
<ReactQuill
value={value}
modules={modules}
onChange={this.handleOnChange}
onBlur={this.handleOnBlur}
theme="snow">
<Container />
</ReactQuill>
);
}
}
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
value: '<h1>Testing Quill</h1><strong>Custom Editing Area</strong>'
};
this.handleOnChange = this.handleOnChange.bind(this);
this.handleOnBlur = this.handleOnBlur.bind(this);
}
handleOnChange(value) {
this.setState({ value });
}
handleOnBlur(value) {
this.setState({ value });
}
render() {
return (
<Editor
value={this.state.value}
onChange={this.handleOnChange}
onBlur={this.handleOnBlur}
/>
);
}
}
This code appears to be working in React 15. However, in React 16, it will lose focus and throw this console error after an onChange event; The given range isn't in document. I believe this is due to the selection not being updated correctly. If you take out the custom editing area, this code will work inside React 16.
I have attached an example in Codepen, in here you can set the dependencies for React 15 vs React 16 to notice the error.
In the meantime, we have removed the custom editing area and wrapped React Quill with a styled component and an '.ql-editor' selector to add a custom style to the editing area.
Thanks for your time!