fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: Menu autosize positioning does not apply boundary padding vertically

Open rocketBANG opened this issue 10 months ago • 2 comments

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

Screenshot 2024-03-28 131915

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

image

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.

rocketBANG avatar Mar 28 '24 20:03 rocketBANG

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

rocketBANG avatar Mar 28 '24 20:03 rocketBANG

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

spmonahan avatar Apr 01 '24 20:04 spmonahan