fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: Inline prop doesn't work correctly for nested submenus and no way to change mountNode.

Open SahilTara opened this issue 3 years ago • 0 comments

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.

  1. Open the menu by pressing the toggle menu button
  2. Hover over the preferences option to open up the preferences sub menu
  3. 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.

SahilTara avatar Sep 21 '22 15:09 SahilTara