Misaligned menu when using menuPortalTarget and menuPlacement = auto

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

Thanks for your work on the library!

@ArnaudWeyts

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 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

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

@ebonow

@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)

@ArnaudWeyts

@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.

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

Navigation Menu

Repository navigation

Misaligned menu when using menuPortalTarget and menuPlacement = auto #4336

Are you reporting a bug or runtime error?

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Misaligned menu when using menuPortalTarget and menuPlacement = auto #4336

Description

Are you reporting a bug or runtime error?

Activity

ebonow commented on Dec 18, 2020

ArnaudWeyts commented on Jan 4, 2021

ebonow commented on Jan 8, 2021

ArnaudWeyts commented on Jan 11, 2021

ebonow commented on Jan 11, 2021

odusseys commented on Jul 1, 2021

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions