Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Misaligned menu when using menuPortalTarget and menuPlacement = auto #4336

Closed
ArnaudWeyts opened this issue Dec 17, 2020 · 6 comments · Fixed by #5256
Closed

Misaligned menu when using menuPortalTarget and menuPlacement = auto #4336

ArnaudWeyts opened this issue Dec 17, 2020 · 6 comments · Fixed by #5256
Labels
issue/bug-confirmed Issues about a bug that has been confirmed by a maintainer menu-bug Addresses menu positioning, scrolling, or general interactions

Comments

@ArnaudWeyts
Copy link

Are you reporting a bug or runtime error?

A Bug

For some reason the menu is misaligned slightly to the left when using the body as a menuPortalTarget and setting the menuPlacement to auto, I'm not sure why this is the case and it only seems to happen in a specific layout (select on the right bottom), it seems like it could be adjusting for a potential scrollbar or something. When you hover over the items, the menu suddenly jumps to the correct position.

https://codesandbox.io/s/react-select-v3-sandbox-forked-d5txb?file=/example.js

Dec-17-2020 16-39-03

Thanks for your work on the library!

@ebonow
Copy link
Collaborator

ebonow commented Dec 18, 2020

Greetings @ArnaudWeyts ,

I am unable to replicate the described behavior.

  • What browser and version and what OS are you using?
  • Are you seeing this behavior on any other browsers?
  • Is it possible that the viewport was zoomed in/out at all?
    • It doesn't appear to be the case, but in my experience that can cause strange visual artifacting

@ebonow ebonow added awaiting-author-response Issues or PRs waiting for more information from the author issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet labels Dec 18, 2020
@ArnaudWeyts
Copy link
Author

@ebonow Hey, thanks for getting back to me

  • Happens for me on the latest version of chrome on macos (Version 87.0.4280.88), but we've also internally had reports of this on windows machines
  • The codesandbox reproduces the bug on every browser (Firefox, Safari, Edge)
  • The viewport is at a standard 100%, It happens both on my macbook pro 2015's retina screen (2880 × 1800p) and a regular 1920 x 1080p screen

@ebonow
Copy link
Collaborator

ebonow commented Jan 8, 2021

I'm running Chrome Version 87.0.4280.88 on Mac OSX and I am unable to replicate. Can someone else perhaps take a look and verify what they see?

Screen.Recording.2021-01-07.at.5.45.24.PM.mov

@ArnaudWeyts
Copy link
Author

@ebonow I've just discovered that this only seems to be the case when a mouse is connected to my macbook, and causes the scrollbars to be displayed. (As you can see in my gif, the scrollbar is displayed, but when using the trackpad, macbooks don't display scrollbars by default)

@ebonow
Copy link
Collaborator

ebonow commented Jan 11, 2021

@ArnaudWeyts Thank you for the update. I am able to replicate this now when there is a mouse. I'll see if I can discover what might be causing this discrepancy. Please let me know if you come across the answer to this in the meantime.

@ebonow ebonow removed the awaiting-author-response Issues or PRs waiting for more information from the author label Jan 14, 2021
@ebonow ebonow added the menu-bug Addresses menu positioning, scrolling, or general interactions label Jun 10, 2021
@odusseys
Copy link

odusseys commented Jul 1, 2021

I am getting the same issue on a Macbook with no mouse.

@Methuselah96 Methuselah96 added issue/bug-confirmed Issues about a bug that has been confirmed by a maintainer and removed issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet labels Sep 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/bug-confirmed Issues about a bug that has been confirmed by a maintainer menu-bug Addresses menu positioning, scrolling, or general interactions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants