Draft-js: `focus()` cause unexpected scroll

Created on 11 Sep 2017  路  12Comments  路  Source: facebook/draft-js

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

What is the current behavior?
On chrome 61.0.3163.79, the view will scroll to top if the editor's focus() method were called.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
Checkout this: https://jsfiddle.net/85t88Lat/

What is the expected behavior?
Just get the editor focused, without the extra scroll.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
Draftjs/0.10.1 Chrome/61.0.3163.79

Most helpful comment

Thanks everyone for flagging this and confirming the fix! I also was able to reproduce it in Chrome Canary (Chrome v63).

It looks like we have updated fbjs internally at FB but not yet in the package.json for Draft in open source. Just opened a PR to update this for everyone in open source, and will do a minor release to get that out to folks asap. 馃悗

All 12 comments

For what it's worth, I tested this in Chrome 60.0.3112.113 / OSX and didn't see the issue with your fiddle. It didn't do the scroll as you described.

Then I upgraded Chrome and now on 61.0.3163.79 and your fiddle does scroll to the top when you click to focus the editor.

Same issue since Chrome 61 (macOS).

Also, a cut action (command + x) scrolls the page to top, too.

Found an similar issue #14. Appears to be an issue of getScrollPosition.js in fbjs

I can confirm that the fix from #14 works for me. Doing a yarn upgrade fbjs (which updates fbjs to 0.8.15) fixes the issue on Chrome 61.

I am also experiencing the same issue on Chrome 61.0.3163.79.
Three of my customers have reported this issue too.

It looks like draft requests version ^0.8.7 of fbjs. So a fresh install of your node_modules should fix this by upgrading to a working 0.8.15 version. Alternatively you can do yarn upgrade fbjs or npm upgrade fbjs as @jeffsaracco mentions above.

Yes, that fix the issue. Will it better to update dependency of fbjs to 0.8.15 in package.json? Since we may not have direct dependency of fbjs

@michaelcox Hey! Thanks for info about this issue! I indeed nuked node_modules, upgraded fbjs to 0.8.15, and am still experiencing this!

@techird you mentioned it fixed this for you?

I'm not sure what the issue might be then @abhiaiyer91. Are you sure you upgraded that module? If you're on node 8 and have a package-lock.json file, you'll need to delete that too. Or do the npm upgrade fbjs thing.

@michaelcox sorry! you are completely right, lock files :) IM GOOD! thank you!

Thanks everyone for flagging this and confirming the fix! I also was able to reproduce it in Chrome Canary (Chrome v63).

It looks like we have updated fbjs internally at FB but not yet in the package.json for Draft in open source. Just opened a PR to update this for everyone in open source, and will do a minor release to get that out to folks asap. 馃悗

I experiencing this scroll behaviour with other things (jQuery.focus() for example). As I am not able to find out, what causes this, I am interested in what the fix is in the fbjs lib to prevent this scroll. Possibly I could apply this fix for my problem.

Was this page helpful?
0 / 5 - 0 ratings