Dropdown Menu: Allow disabling autofocus of the Trigger based on the event

[nklhtv]

Feature request

Overview

Allow disabling the autofocus of the Dropdown Menu Trigger on menu close, based on the event. I want to prevent autofocus of the Trigger in cases the menu is closed by a mouse event, but cannot do that cause the event argument in the onCloseAutoFocus is a CustomEvent which does not points to the original event. Autofocus of the Trigger is great only when the menu is closed by a keyboard event.

Examples in other libraries

I haven't used similar libraries, but can give you an example of web apps where this behavior is implemented:

• Gmail & Google top right buttons: avatar & apps. They all get focus when the popup is closed by Esc, but they do not gain focus when the popup is closed by clicking outside.
• Facebook top right buttons: avatar & notifications.
• Reddit top right buttons: avatar

Who does this impact? Who is this for?

Users that use only a mouse.

Additional context

[nklhtv]

~As a workaround i use the following onInteractOutside handler:~

onInteractOutside={(event) => {
  const originalEvent = event.detail.originalEvent as PointerEvent;
  if (originalEvent.button === 0) {
    Object.defineProperty(event.detail.originalEvent, "ctrlKey", {
      value: true,
    });
  }
}}

---

The workaround above does not handle plenty of cases, for example if the a menu option is selected. There should be a general approach to opt-out of autofocus when the user uses only the mouse. It looks wierd and popular websites does not behave like this.

[benoitgrelard]

Gmail & Google top right buttons: avatar & apps. They all get focus when the popup is closed by Esc, but they do not gain focus when the popup is closed by clicking outside.

This is true for non-modal layers and our primitives work the same way when modal={false} is passed, ie. if you click outside to dismiss we don't autofocus in this case, and let the natural focus behaviour happen.