Menu Component causing page to scroll

[thivy]

What package has an issue

@mantine/core

Describe the bug

Hi Team,

I found an issue with Mantine 5.0.2 where the scroll position of the body changes if there are many Menu Components rendered on the page. Below are the examples of with and without the Menu component.

Has anyone had this issue?

With Menu component https://youtu.be/NFigCG_leGU

Without Menu component https://youtu.be/up2pdnbI-xQ

What version of @mantine/hooks page do you have in package.json?

5.0.2

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[rtivital]

Hi @thivy, please provide a codesandbox (template) with minimal reproducible example. It is not possible to identify the issue without reproduction.

[nostrapollo]

I experienced the same issue, unfortunately I can't seem to reproduce using the codesandbox template...after experimenting with it I found setting transitionDuration={0} on the <Menu> component stopped the scrolling issue in my project.

I suspect it has something to do with data-autofocus and the useFocusTrap hook because the Menu component is scrolled into view.

[nacasha]

I experienced the same issue, unfortunately I can't seem to reproduce using the codesandbox template...after experimenting with it I found setting transitionDuration={0} on the <Menu> component stopped the scrolling issue in my project.

I suspect it has something to do with data-autofocus and the useFocusTrap hook because the Menu component is scrolled into view.

thanks, for now I have to use this workaround to prevent scrolling to bottom when using Menu component

[wes337]

Would adding a default prop transitionDuration: 0 to the Menu component be a valid fix for this?

[rtivital]

No, I still do not see the issue, Menu component does not scroll anything when used on mantine.dev docs.

[keith-loww]

I have also experienced the same issue, and the transitionDuration={0} "fix" also worked for me.

[nacasha]

No, I still do not see the issue, Menu component does not scroll anything when used on mantine.dev docs.

Yeah, It's weird that on mantine docs it doesn't scroll, but the issue is exist to other people projects, and by adding transitionDuration: 0 prop fix the issue

[rtivital]

If you can provide a sandbox we can try figuring out how to fix that on library level, we cannot start working on the issue without reproduction.

[nacasha]

If you can provide a sandbox we can try figuring out how to fix that on library level, we cannot start working on the issue without reproduction.

Here I created the sandbox to reproduce the issue, CodeSandbox As you can see, the page will scroll to Menu component where it placed as the page loaded There are also cases such as rerendering component when using data from api (get data from page 2, 3, etc), like the video that @thivy provide

[rtivital]

Great, thanks for reprodcution!

[jvanamerongen2002]

Looking into a profile capture with devtools, the scroll event seems to be fired by Floating UI. This is in line with this bug appearing after updating to v5.0.3 in my case and with the inner works of Menu. Lmk if you'd like an export of my capture, but you should also be able to profile @nacasha 's sandbox.

Scroll event log:

[wes337]

I can't reproduce this locally, but I can see it on the CodeSandbox above. I tried copying the CodeSandbox example into a Storybook story, but it does not scroll.

It also seems to be fixed when we pass transitionDuration={0} on the <Menu> component as mentioned above. transitionDuration is not set in the defaultProps of the src/Menu/Menu.tsx file (lines 73-79). Would adding the line transitionDuration: 0 to the defaultProps be the fix here?

[rtivital]

No, disabling transition on Menu component is not a good solution – we still want animations. Some bugs are not reproducible in storybook, it may be a strict mode development only issue (storybook always displays prebuilt components in production mode).

[wes337]

Right, never mind I see what you mean now. I thought setting the transition duration to any value would resolve this, but only 0 does.

[dipiash]

I have the same situation with Select / MultiSelect components if transition duration > 0.

If I select a value, the page scroll to top.

Any ideas how to solve, without to set transition duration to 0?

[dipiash]

Example for https://github.com/mantinedev/mantine/issues/1982#issuecomment-1226433167 from page https://mantine.dev/core/select/#animations

https://user-images.githubusercontent.com/14073668/186535705-4f9b3e82-324b-41af-866c-1fc843e57b69.mov

[dhrjarun]

Example for #1982 (comment) from page https://mantine.dev/core/select/#animations

example.mov

Example for #1982 (comment) from page https://mantine.dev/core/select/#animations

example.mov

Is this caused by the same issue?

[rtivital]

Maybe

[dhrjarun]

I think this issue of docs, is only occurring for animation link

[dhrjarun]

In the Select Demo when I remove transitionDuration or make it to 0 it fixes the issue.

[rtivital]

Fixed in 5.2.7 – https://codesandbox.io/s/headless-glade-kw78v7?file=/src/App.js