Draft-js: Unwanted selection's restoring when re-focusing

[vinpac]

Steps:
- Select some characters
- Click outside the editor ( or blur )
- Click inside the editor ( or focus )

Instead of creating a new collapsed selection where I clicked, it restores the same selection that I made before blurring. It doesn't happen when I blur and the selection is collapsed

I was able to solve it "removing" the selection on blur since it doesn't happen when the selection is collapsed, but I think this is a bug and we I should report it.

It happens on both chrome and firefox, I haven't tested on others.

  constructor(props) {
    super(props);
    ...
    this.blur = () => this.refs.editor.blur()
    ...
  }

  onBlur(e) {
    setTimeout(this.moveFocusIfNotCollapsed, 0)
  }

  moveFocusIfNotCollapsed() {
    if (!this.state.editorState.getSelection().isCollapsed()) {
      this.setState({
        editorState: EditorState.moveFocusToEnd(this.state.editorState)
      }, this.blur)
    }
  }

  render() {
    const { editorState } = this.state;
    return (
      <div className="note-editor">
        <Editor
          ref="editor"
          blockStyleFn={this.getBlockStyle}
          editorState={editorState}
          onBlur={this.onBlur}
          onChange={this.onChange}
        />
    )
  }

Draft 0.8.1

[sophiebits]

Yeah. This is because Chrome had an annoying bug where it would lose the cursor position, and I changed this line

https://github.com/facebook/draft-js/blob/5be5f0bdc04c682c76a6ebeb17cbec35e2d0615d/src/component/handlers/edit/editOnFocus.js#L33

to be forceSelection instead of acceptSelection. I meant to look into if there is a way to restore the selection only in that case and not in the case you describe but never got around to it. Maybe you can figure it out?

[vinpac]

Thanks for the tip. I'm giving it a try.
So what I did was:

if (currentSelection.isCollapsed()) {
    this.update(EditorState.forceSelection(editorState, selection));
} else {
    this.update(EditorState.acceptSelection(editorState, selection));
}

But, while I was testing, I found out that when you programmatically focus the editor, it restores the last cursor, whereas it should take the cursor to the end, like textarea elements. I think it's better to UX to take the cursor to the end rather than restoring it. Maybe it would better to have 2 methods to focus:

EditorComponent.focus that works just like textarea elements, taking the cursor to the end.
EditorComponent.focusLastPosition that works like it's working now.

(Sorry if it's not well written. English is not my mother tongue)

[vinpac]

What bug were you having with acceptSelection? Force selection seems to be having issues on firefox here.

https://github.com/vinpac/draft-js - Selection/focus problem solved - chrome ( 49.0.2623.110 ) and Firefox ( 42.0 )

[sophiebits]

Read the comment in the code.

[vinpac]

Oh, i'm sorry. I don't know how I didn't notice that :s
I don't have a mac, so I can't reproduce it. On linux it doesn't seem to happen.
Shouldn't we keep the acceptSelection and put this bug as a known issue, since it 'messes up' less forceSelection.
Using forceSelection just creates another -- more noticeable -- bug.

[sophiebits]

Yeah, it is more noticeable. I'm actually inclined to keep the current behavior, because losing your selection is very annoying and breaks muscle memory in the case that you switch tabs quickly and expect to have the same cursor. In cases where the selection is restored and it shouldn't be, it is usually relatively easier to get the cursor where you want it to be.

[vinpac]

Hm, ok. I'll try to find a solution to this. But, until that, It would be good if we had a callback like <Editor editOnFocus={this.editOnFocus} /> so we could use acceptSelection since some of us use Draft.js on Chromium and don't face this switching tabs's bug.
:D

[elfey]

So how do we fix this?

[dreday966]

So how do we fix this? +1.
I spent one hour in this bug, thought this is because moveSelectionToEnd doesn't work,
but I found out that it's due to chrome.
moveSelectionToEnd works in Safari