fluentui
fluentui copied to clipboard
[Bug]: Menu autosize positioning does not apply boundary padding vertically
Library
React Components / v9 (@fluentui/react-components)
System Info
System:
OS: Windows 10 10.0.22631
CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
Memory: 10.66 GB / 31.71 GB
Browsers:
Edge: Chromium (123.0.2420.53)
Internet Explorer: 11.0.22621.1
Are you reporting Accessibility issue?
None
Reproduction
https://stackblitz.com/edit/jurvrn-8vxs7f?file=src%2Fexample.tsx
Bug Description
Actual Behavior
when menu has positioning props of autosize: true
and overflowBoundaryPadding
, it doesn't appear the boundary padding is respected with bottom and top. The menu expands to the very bottom of the page without padding
<Menu
positioning={{
autoSize: true,
overflowBoundaryPadding: { bottom: 24, top: 24 },
}}
>
Expected Behavior
I would expect by setting the bottom overflowBoundaryPadding
to 24 that there would be 24px between the bottom of the menu and the bottom of the webpage/viewport
Logs
No response
Requested priority
Blocking
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.
Looks like the overflowBoundary
props are passed into maxSize
, but not overflowBoundaryPadding
https://github.com/microsoft/fluentui/blob/caf072510560c342c3e6e0bcc57b83b8500d21f6/packages/react-components/react-positioning/src/middleware/maxSize.ts#L40-L43
It seems the ComboBox
component achieves this by setting fallbackPositions
as well as a max-height: 80vh
, maybe Menu
could do something similar so overflowBoundaryPadding
wouldn't be needed?
Part of the problem with the repro is that overflowBoundary
is not set in positioning like it is in the example.
Even with that it seems that bottom
is not respected: https://stackblitz.com/edit/jurvrn-dwzvro?file=src%2Fexample.tsx