unwanted website scroll to top on refocus

[slorber]

Description

On Chrome 94 + MacOS 11.5, it's been reported that the window smooth scrolls to top when window regains focus:

Screen.Recording.2021-10-07.at.6.43.18.PM.mov

Initially reported here by @vikramvi & @Josh-Cena:

• Running on device page - Platform selections broken #2771
• "Setting up the development environment" webpage - Can't select macOS and iOS options, automatic upward scrolling is happening #2806

https://reactnative.dev/docs/environment-setup

I can't reproduce myself.

Documentation version

0.66

[slorber]

I am not able to reproduce this bug

@vikramvi, @Josh-Cena are you able to reproduce this:

• on another browser?
• on another computer?
• on the Docusaurus.io website?
• with/without incognito?
• with all browser plugins disabled? (or anything that can mess up with your browser?

[slorber]

@Josh-Cena the video above shows something like multi-desktop keyboard navigation or something: how can I set this up locally?.
Are you both using that? Can this be reproduced by changing browser tabs or just switching programs without virtual desktops?

Are you using a shortcut that involves pressing command + up?

[Josh-Cena]

on another browser?

Can't reproduce in Safari 14, so maybe a chromium issue

on another computer?

N/A 🤪

on the Docusaurus.io website?

Yes, using https://docusaurus.io/docs/next/blog#blog-post-authors

with/without incognito?

Both

with all browser plugins disabled? (or anything that can mess up with your browser?

Don't have any that messes with Docusaurus pages

It's reproduced quite inconsistently, and seems to only be visible the first time in a row of consecutive trials. And it's the same with switching windows using trackpad and dock.

[Josh-Cena]

multi-desktop keyboard navigation

Yes, indeed :) All the windows are virtual desktops. You are using mac, you should be able to maximize the window?

And actually, it can be reproduced just by switching browser tabs. I guess it just requires the page to lose focus and then regain focus.

[Josh-Cena]

It could be related to how we restore the page position with tabs? Maybe facebook/docusaurus#5618 would make a difference?

[slorber]

😅 still can't reproduce

if you can try to build Docusaurus site locally in prod, removing suspicious code from BackToTopButton , tabs restoration etc, that would help to figure out the source of this issue

[Josh-Cena]

Removing this part fixed it for me:

https://github.com/facebook/docusaurus/blob/e1b4da04fe88767d52f21bf1f043af308e7bfbd2/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx#L77-L91

So can confirm it's the scroll into viewport problem. This is because the handleTabChange is fired onFocus, but when switching browser tab / window the component also loses / regains focus. And I guess it's not reproduced when I consecutively try several times because the time wasn't sufficient for the page to lose focus / I've triggered some caching

[Josh-Cena]

Made a toy example:

<div tabindex="0" onfocus="console.log('Focused');">Click me</div>

Put this into an HTML file and open it in a browser. It logs Focused the first time you click on it, and also every time when you close the page and reopen it.

[Josh-Cena]

Is this UX even useful? If I switch tabs before the tab is visible (i.e. when the tab headings are at the bottom edge of the page, not something 99% of the users would do, I guess), should the page scroll up for me?

Edit. This is only fired when the tab belongs to a syncing group. Not sure what the scrolling is used for 🤦‍♂️

[Simek]

The code block you pointed at leads to this PR:

• feat(v2): auto focus to tab if it is outside viewport facebook/docusaurus#4209

In its description, there is a bit of reasoning behind the addition and an example of the case which author have tried to fix.

[Josh-Cena]

Ah, I see... Thanks for reminding

[slorber]

We have removed this code in latest version for a better version of this feature, so upgrading may fix the issue