[menu-button] Right aligned menu with wide item infinitely resizes

[bradbarrow]

🐛 Bug report

Current Behavior

When a Menu-Button is right aligned to a viewport and one of it's items is wide enough that the MenuList needs to occupy the full width of the screen and the item will still wrap - the MenuList/Popover grows towards the left edge of the viewport but when it collides it starts from 0 width again and animates in an infinite loop.

Note I am not using Reach UIs styles

When I do try and use Reach UIs styles, I experience this behaviour instead.

Expected behavior

I'd expect the MenuList/Popover to occupy the full available width of the screen and for the items inside it to wrap within themselves the same way they do when the button is left aligned.

Reproducible example

Sandbox

Sandbox with Reach UI styles

Additional context

Seems related perhaps to this: #189
At times I was able to reproduce the above issue in my same non-reach-ui-styles Sandbox above when resizing the viewport.

Your environment

[bradbarrow]

Hi folks,

I've taken a closer look at this today - sorry for the hasty write up last night

Note I am not using Reach UIs styles

The style from Reach UI that "fixes" this bug is a white-space: nowrap on the MenuItem. If I include the Reach UI styles but override the menu item to wrap, the bug still occurs:

[data-reach-menu-list],
[data-reach-menu-items] {
  white-space: initial !important;
}

I've since discovered another edge case in reproducing the issue. If the trigger button is hard up against the right edge of the viewport (no padding or margin on it's right) then the menu opens stretched vertically with it's lines wrapping extensively.

If you add even 1px of space between the right edge of the trigger and the right edge of the viewport - the animated widening of the menu occurs, resetting when it collides with the viewport's left edge.

Here's a CodeSandbox that illustrates this behaviour with the following conditions:

• a right aligned button
• white-space set to initial on the menu items
• a 1px gap between the right edge of the trigger button and viewport
• an abnormally wide / long menu item