fluentui
fluentui copied to clipboard
[Bug]: Inline prop doesn't work correctly for nested submenus and no way to change mountNode.
Library
React Components / v9 (@fluentui/react-components)
System Info
System:
OS: Windows 10 10.0.22000
CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
Memory: 30.86 GB / 63.71 GB
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.42)
Are you reporting Accessibility issue?
no
Reproduction
Forked from nested submenu example with inline props added. https://codesandbox.io/s/late-sound-qt7rrr?file=/example.tsx
Bug Description
Use the inline prop on a nested submenu.
- Open the menu by pressing the toggle menu button
- Hover over the preferences option to open up the preferences sub menu
- Try hovering over any item inside the nested sub menu
Actual Behavior
The nested submenu incorrectly dismisses suddenly.
Expected Behavior
The nested submenu does not dismiss suddenly.
Some notes: In the documentation and in code comments it seems like inline is supposed to be completely ignored for submenus, so part of the issue is that inline isn't being ignored. However, avoiding using the inline prop causes items to be rendered in document.body which is not desired for my use case, an alternative would be being able to specify the mountNode in this file: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx#L17 So that it is something like
export const renderMenuPopover_unstable = (state: MenuPopoverState) => {
const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);
if (state.inline /* maybe add this here to ignore inline in submenu?: && !state.isSubmenu */) {
return <slots.root {...slotProps.root} />;
}
return (
<Portal mountNode={state.mountNode}>
<slots.root {...slotProps.root} />
</Portal>
);
};
of course would probably need changes in useMenuPopover to support such change.
Logs
No response
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
maybe (depends on if adding mountNode is a valid fix).
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.