Page automatically scroll to top when focus in Chrome 61

[froyog]

When clicking the main part of the editor, the editor will focus (which is expected) but the whole page will automatically scroll to top. I did some digging to the source code and found out that when clicking, this method will be invoked

react-draft-wysiwyg/src/Editor/index.js

Line 334 in 884424b

focusEditor: Function = (): void => {

and caused the page to scroll.

I tried to fix it with an ugly apporach which save the current location first and scroll to it after focus:

  focusEditor: Function = (): void => {
    setTimeout(() => {
      let x = window.scrollX;
      let y = window.scrollY;
      this.editor.focus();
      window.scrollTo(x, y);
    });
  };

This bug only seems to appear in Chorme 61.

[jpuri]

@scarlet608 : can you plz check if you face this issue here also: https://jpuri.github.io/react-draft-wysiwyg/#/ and here: https://draftjs.org/

[froyog]

@jpuri Nope. Sorry for the late reply. I double checked everything and it only appears in my project in Chrome 61.

The editor worked totally fine in Firefox, Edge and Safari and it even worked in Chrome 60 (before update) but failed in Chrome 61 and 63. I havn't chnaged a single line of my code. So it seems like a browser behavior.

As I mentioned before, this line caused the issue

react-draft-wysiwyg/src/Editor/index.js

Line 336 in 884424b

this.editor.focus();

and everthing else works perfectly fine. I am really wondering what caused the problem.

[icd2k3]

I'm having the same issue with draft-js (autofocus) and Chrome 61 (works fine in Firefox), so looks like it may likely be a Chrome bug?

[jpuri]

That is weird, but yes can be chrome issue 😄

[froyog]

@icd2k3 @jpuri
I finally figured out a solution to this issue by creating a new project and paste all of my code into the new one (not changing a single line of the old code). I think it might be a issue with create-react-app or chrome but copy & pasting actually fixed my issue.