[Popper] Fix regression when an occluded submenu stays visible even with enabled hideWhenDetached
flag
#3237
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
There seems to be a regression in
react-popper
component in versions1.1.3
and newer, which affected submenus in scrollable menus.Problem
When a menu is rendered, which
hideWhenDetached
flag enabled.Then in the latest versions of
react-menu
component this submenu stays on screen even when its parent item is scrolled out of the visible area.react-popper
1.1.2 and this branchreact-popper
1.1.3Screen.Recording.2024-11-20.at.17.51.06.mov.mp4
Screen.Recording.2024-11-20.at.17.54.25.mov.mp4
Root cause
This regression seems to be caused by changes in this PR: #2185
boundary
option passed to thehide
middleware. Now an empty array is passed asboundary
option, when nocollisionBoundary
prop is defined, instead of anundefined
value in version 1.1.2.boundary
option at all, this let Floating UI fall back to its defaultclippingAncestors
value. But because now we pass an empty array instead, which is a truthy value, the default fallback value is never used.Proposed changes
This PR adds an extra check for undefined
collisionBoundary
prop. When it's not defined, then we don't override the defaultboundary
value passed to Floating UI helpers either.A few tweaks are also made to the
<Menu>
component's storybook to reproduce the issue and test the fix.