[Bug]: When using custom anchor, clicking on menu trigger when menu is opened doesn't close the menu

[eridanurce]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 17.47 GB / 63.73 GB
  Browsers:
    Edge: Chromium (121.0.2277.98), ChromiumDev (122.0.2365.3)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/sandbox/eloquent-jennings-t6qw2m?file=%2Fsrc%2Fexample.tsx%3A22%2C5

Bug Description

Actual Behavior

1. Click the menu button to open the menu popover (either "Open menu" or "Custom trigger" button).
2. Click either of the menu buttons again to close the menu. -> Menu stays open, there's an animation that makes it seem like it reopened. Reproducable in the storybook: https://react.fluentui.dev/?path=/docs/components-menu-menu--default#anchor-to-custom-target

Expected Behavior

The menu popover should close on step 2, like it does for all other menus. https://react.fluentui.dev/?path=/docs/components-menu-menu--default

Logs

No response

Requested priority

Normal

Products/sites affected

Dynamics 365 Business Central

Are you willing to submit a PR to fix?

no

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.

[smhigley]

@eridanurce the reason this is happening is because two events happen in sequence when you click the custom anchor:

1. A capture-phase click event on the document fires, closing the menu
2. A click event on the anchor fires, re-opening the menu

By default, clicking outside a menu closes it unless you click the built-in MenuTrigger. Without that, the Menu component has no way to know that the custom trigger is a trigger, and not just another outside-menu element. You can re-add that check yourself within the onOpenChange callback to prevent it from treating the custom trigger as an outside-menu click, which I've added to this sandbox: https://codesandbox.io/p/sandbox/festive-khayyam-kf6q39?file=%2Fsrc%2Fexample.tsx%3A29%2C24

Let me know if that makes sense and solves your use case!

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!