React-quill: ql-editor loses focus after one keypress

[Tackyshot]

I'm having an issue where when I press a key the element with .ql-editor loses focus and I can no longer type. This occurs whenever i have an onChange={this.handleEditorChange} prop added. the following example is:

<div className="small-12 columns" style={{border:"1px solid black", padding:"0"}}>

  <ReactQuill
    theme="snow"
    items={ReactQuill.Toolbar.defaultItems}
    className="small-12 columns"
    onChange={this.handleEditorChange}
    defaultValue={this.state.text}
    style={styles.getStyles(['no_side_padding'])}
      styles={{
        ".quill-toolbar":{
          'border-bottom':'1px solid black'
        },
        ".ql-editor":{
          'min-height': '15em'
        }
      }}
    />
</div>

the handleEditorChange is:

handleEditorChange: function(value, delta, source){
        this.setState({
            text: value
        });
}

i suspect that its because setState triggers a re-render, but I don't have any issues with my native form components.

Suggestions?

[Tackyshot]

Update

i have narrowed it down the the styles property. as long as styles={{}} prop exists (regardless of the content inside it) the contenteditable div automatically loses focus.

[zenoamaro]

Quill unfortunately has no facilities to update the configuration once instantiated, so it has to be reloaded for changes to take effect; because styles is a new object each render this causes constant re-instantiation.

If you're not changing your styles constantly you can define that styles object somewhere else where it stays the same, and that way you should be covered in the mean time while this is being fixed. You could also override your css elsewhere.

Long term, though, I'm not sure what to make of the style API. For one it shouldn't cause re-renders so easily, and even then the previous focus state should be brought back seamlessly after render. So expect this to be investigated and fixed soon.

But Quill doesn't offer a way to modify styles after instantiation, so the choices are either replacing it entirely with a completely independent implementation, or "suck it up" and tell people to just override CSS the usual way if they need to.

How often do you use styles? What for? I'm trying to get a feel for how people use that.

Thanks a lot for the report by the way.

[Tackyshot]

Currently, I'm using the style API to override default styles in the stylesheets. My intention is to remove the stylesheets altogether and instead use inline styles entirely, but this bug prevents me from doing so. Currently it's not breaking issue to include a style sheet, but it isn't ideal.

what about this as a temporary solution to Quill's issue?

in componentWillRecieveProps:

If (nextProps.style !== this.props.style){
  this.setState({
    forceFocus: true
  });
}

then in componentDidMount:

if(this.state.forceFocus){
  editor.focus();
}

I only took a quick look at your code, but I think that might provide a simple solution. The idea is that if style is provided, it should just automatically use focus API for quill.

I would fork it and test it myself, but I don't have the time as I'm currently in the middle of a big push, and just editing the style-sheets is a good enough (temporary) work around for me.

[zenoamaro]

The selection restoration when un-mounting and mounting the editor should work already, as there are provisions to save it and restore it after. Not sure why it isn't working here.

You can do something like this, in the mean time:

var styles = { … };

var React.createClass({
    ...
    render() {
        return (
            <ReactQuill ... styles={styles}/>
        );
    }
});

This should keep the styles object identical and avoid the re-rendering.

By the way, there is a focusing branch that adds a public focus and blur api to the editor component. It is imperative, so I don't really like it that much, but see if you find it helpful.

[mrmurphy]

@zenoamaro thanks for the workaround. I was having this problem, but I'm fine to move my styles object out of the render method, so your fix worked for me.

It is unexpected behavior, though. I'm not sure what to do about that.

[zenoamaro]

Yes, it shouldn't happen, and should be fixed.

[zenoamaro]

I have tracked down what causes the issue, and unfortunately it has been caused by another workaround in use to apply custom Quill styles. I have a plan to fix this, but unfortunately it couldn't go in this release.

In the mean time, please declare non-primitives (such as objects or arrays) outside the render, so that they won't be created each time and so won't trigger a re-render.

[callum]

I seem to be suffering a similar problem. Here's my code:

const Segment = props =>
  <div>
    <ReactQuill toolbar={false} formats={["bold", "italic"]} value={props.segment.value}
      onChange={value => props.update(props.segment.id, value)} />
  </div>

When props.update is called and the component is re-rendered, focus is lost completely.

[or]

This also happens when toolbar options are passed along. I suspect for the same or a similar reason.

[joneslloyd]

Yes, I'm also getting this

[artf]

If I'm not getting wrong this issue is related to all this props:
https://github.com/zenoamaro/react-quill/blob/master/src/component.js#L51-L60

But can confirm @zenoamaro's workaround works

[zenoamaro]

This is fixed in the latest master. Deep prop comparison is now in place, and objects can safely be passed to a ReactQuill component without triggering re-renders.

[Jaggler3]

For anyone who comes back to this issue, there are many other reasons for the component containing your <ReactQuill>, such as module handlers, which can be wrapped in a useCallback to avoid remounting on an edit event. Make sure to provide the correct dependencies for the useCallback as well.

[laljidp]

I had the same issue with react-quill.
in my case the parent component key was changing on each character I entered in the editor, therefore react-quill considered as a new render each time,

so, make sure that parent component key is not changing on while entering character into the quill editor.

you can check in the react-devtools extensiosn to check if the parent components key is changing or not while adding text into quill editor.