Draft-js: Calling blur() on the editor doesn't remove the cursor

Created on 23 Nov 2016  路  7Comments  路  Source: facebook/draft-js

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Calling blur() on the editor doesn't remove the cursor (in Chrome).

When calling blur(), the DraftEditor component will run:
ReactDOM.findDOMNode(this.refs.editor).blur();
When logging document.activeElement right after it, I can see that the editor has been blurred successfully (body is active).

However, the editOnBlur method doesn't run (which I guess it should?).

The solution I went with is simple: I just do the same as editOnBlur after calling blur(), i.e:
window.getSelection().removeAllRanges(). But I guess the real solution is to figure out why editOnBlur (which is attached to the editor's onBlur event) doesn't run and fix that.

Most helpful comment

I have this problem too. Any news on this?

All 7 comments

You shouldn't call findDOMNode. Use blur method of Editor component instead.
Just:

if (this.refs.editor) {
  this.refs.editor.blur();
}

I was probably a bit unclear. To clarify: I am calling the editor component like that. What I was referring to above was how Draft itself handles that call: https://github.com/facebook/draft-js/blob/master/src/component/base/DraftEditor.react.js#L362

When I have time I'll try to recreate this in a fiddle.

I have this problem too. Any news on this?

I have this problem too. Any updates on this, anyone?

I have this problem too. Any updates on this, anyone? anyone?

more specifically, I encountered this problem when an alert is dismissed, is autofocus to the first text input unexpectedly, though i use blur(), the cursor is still there.

document.activeElement.blur()

Was this page helpful?
0 / 5 - 0 ratings