React-quill: How do I focus()?

[That-David-Guy]

Hi

I'm trying to set the input focus to my react-quill component.

I tried the following but it doesn't seem to do anything (it works for a normal input field though).

componentDidMount: function(){
  React.findDOMNode(this.refs.quillRef).focus();
},

Any help would be super!

[zenoamaro]

Passing a selection should be the way to focus. Can you try this real quick?

render: function() {
  return (
    <ReactQuill ... selection={{start:0, end:0}}/>
  );
}

Or, if that fails:

componentDidMount: function() {
  this.refs.quillRef.state.editor.focus();
}

[That-David-Guy]

Thanks for the quick reply, but it still is not working for me.

The first way does nothing, and the second way throws an error.

Here is the full component:

var SpeechBodyEditor = React.createClass({

componentDidMount: function(){
    // This line throws an error, editor does not exist
    // this.refs.bodyInput.state.editor.focus();
  },

  render: function() {
    return (
      <ReactQuill
        className="body-editor"
        id="bodyInput"
        onChange={this._handleChange}
        selection={{start:0, end:0}}
        value={this.props.body}
        ref="bodyInput" />
    );
  },

  _handleChange: function(value, delta, source) {
    if (source == 'user' && value != this.props.body) {
      SpeechActionCreators.updateBody(this.props.speechId, value);
    }
  }
});

[zenoamaro]

Can you try branch focusing?

You should be able to focus and blur like so:

this.refs.bodyInput.focus();
this.refs.bodyInput.blur();

This should alleviate your issue for the time around, though I'm not really sold on this. I'd rather not to introduce an imperative API if I can. Anyway, let me know if this works for you.

[That-David-Guy]

Still causing an error.

component.js:268 Uncaught TypeError: Cannot read property 'focus' of undefined

Does it work for you? If so, then it must be something else in my project. I can try to track it down more over the weekend.

My use case is:

1. User types into the Title field (not quill component)
2. User presses enter and is automatically taken to the Body field (which is the quill component)

I'm open to other, more declarative, ways of solving this.

[zenoamaro]

component.js:268 Uncaught TypeError: Cannot read property 'focus' of undefined

I went with what you used in your last example, <ReactQuill … ref="bodyInput" />, so please substitute this.refs.bodyInput.focus() (called from inside the component holding the ref) with the correct ref that you are actually using there. For example, I see that in the original post you used ref="quillRef", so edit accordingly.

The use case is sound. React doesn't provide other means to focus or blur elements, rather than resorting to getDOMNode() and calling focus directly, so I guess it can't really be helped.

Once I get confirmation that you got it working, I'll merge the branch.

[That-David-Guy]

Still doesn't seem to be working. I'm getting an error from your component.js

component.js:268 Uncaught TypeError: Cannot read property 'focus' of undefined

I've simplified my component a lot. This is the full file:

var React = require('react');
var ReactQuill = require('react-quill');

var SpeechBodyEditor = React.createClass({
  componentDidMount: function(){
    this.refs.bodyInput.focus();
  },
  render: function() {
    var value = "hello";
    return (
      <ReactQuill
          onChange={this._handleChange}
          value={value}
          ref="bodyInput" />
    );
  },
  _handleChange: function() { }
});

module.exports = SpeechBodyEditor;

[zenoamaro]

I've merged this API in master. You can try it, make sure you do a make build before to ensure the js files are fresh built.

[Predjo]

This still seems to be a problem. Seems that editor doesnt get saved into state for some reason.
Using the newest version on the master.

[tomlagier]

Same issue - can't get a ref in the parent component.

[abhi-nav]

Hi guys,

This worked for me

<ReactQuill ref={(el) => { this.reactQuillRef = el }} ....

componentDidMount = () => { this.reactQuillRef.getEditor().focus(); }

[Abdulmoiz-Ahmer]

The below code worked for me:
This is my constructor:

 constructor(props) {
        super(props);
        this.contentRef = React.createRef();
    }

Below is my component in render method:

   <ReactQuill
                            value={this.state.fields.content}                     
                            ref={this.contentRef}
                         ></ReactQuill>

In my componentDidMount i focused on this component and it is below:

  componentDidMount() {
        this.contentRef.current.focus();
  }