Draft-js: Draft flashes on IE9/10/11+ when moving cursor or selecting text

[llh1]

Hello,

I've run into some issues using DraftJS with internet explorer 9 and above.
You can reproduce the following issue on the first page of Draft website.

1) Open draft website with IE9+
2) Insert or paste a long text into the text editor (maybe until you see a scrollbar in the window)
3) Try to change the cursor position or select some text in the editor
4) You will see the editor flashing every time

Any ideas why is this happening? And any tips to solve this issue? It looks like there is some re-rendering happening making the editor flashing. Why is this issue not visible when we enter a short text?

Thanks :)

[llh1]

I still don't know the real issue here but I've found this is happening because of the focus() function. In the example, and as described in the doc (https://facebook.github.io/draft-js/docs/advanced-topics-managing-focus.html), the container of the Draft Editor may have a onClick listener with a call to focus().

Like in the plaintext example:

<div style={styles.editor} onClick={this.focus}> <Editor editorState={this.state.editorState} onChange={this.onChange} placeholder="Enter some text..." ref="editor" /> </div>

For now, I just removed the onClick listener to avoid having this flashing issue with IE, but if anybody knows more about it, I'll be interested.

[hellendag]

Hm, I don't think I've seen any other reports of this. Can you provide a gist and a video capture?

[llh1]

Here is a video capture, using IE11 and the front page of DraftJS website. You can see in the case the window has a vertical scrollbar (so with enough text in the Draft editor) and I click somewhere, it flashes/moves.

[hardfist]

It may be caused because the container contains the Editor has a click listener,which will call Editor's focus when you click container,but when you click Editor it also trigger the container's click handler which call Editor to focus.