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

[Core] size middleware not correctly clipping floating element width/height #2895

Closed
aicest opened this issue May 14, 2024 · 0 comments · Fixed by #2896
Closed

[Core] size middleware not correctly clipping floating element width/height #2895

aicest opened this issue May 14, 2024 · 0 comments · Fixed by #2896

Comments

@aicest
Copy link
Contributor

aicest commented May 14, 2024

Describe the bug

When the height of a floating element is greater than the boundary (the viewport by default), and if we set the crossAxis option to true for the shift middleware to allow the floating element to overlap the reference element,

the size middleware computes a different available height for the top placement than for the bottom placement, whereas we would expect it to return the same (to avoid overflow).

To Reproduce

https://codesandbox.io/p/sandbox/cranky-wood-k9pqcz

Steps to reproduce the behavior:

  1. Go to CodeSandbox via the above link
  2. Click the Button to open the popover, you can see the maximum height of the popover is 100px
  3. Click the top to change the placement, now you can see the maximum height of the popover is 160px, we expect its maximum height to remain 100px

Expected behavior

The size middleware should correctly clip the width/height of the floating element to prevent it from overflowing the viewport or boundary.

Screenshots

placement = bottom
image

placement = top
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants