Passing undefined to value prop turns component into controlled mode and breaks

[coderitual]

Hi, I've found the issue with the way of handling value in react-quill. Passing undefined breaks component. This situation happens if you create wrapper around <ReactQuill /> and you want to pass value explicitly without assigning value prop in wrapper itself (eg to limit customisation).

example (click button to see the error): https://codepen.io/coderitual/pen/MZXGNe

I think this line is causing this: https://github.com/zenoamaro/react-quill/blob/master/src/component.js#L142

Would be good idea to mimic standard behaviour as in react docs: https://reactjs.org/docs/forms.html#controlled-input-null-value

If you pass null or undefined your component stays uncontrolled.

Is there a bug in Quill? No

React-Quill version

• [x] 1.3.3

[joconaut]

I see this in version 1.3.5 too.

[Etheryte]

As a workaround, you can avoid the problem by making your wrapper component control the editor if no value prop is provided from the parent.

const ReactQuillWrapper = (props) => {
  const [uncontrolledValue, setUncontrolledValue] = useState("");
  const value = props.value ?? uncontrolledValue;

  const onChange = (newValue) => {
    if (typeof props.value === "undefined" || props.value === null) {
      setUncontrolledValue(content);
    }
    if (props.onChange) {
      props.onChange(newValue);
    }
  }

  return <ReactQuill value={value} onChange={onChange} />
};