[menu] Trigger `onClick` is not called

[OliverJAsh]

Bug report

Current behavior

      <Menu.Trigger
        className={styles.Button}
        onClick={() => {
          console.log("clicked trigger");
        }}
      >
        Song <ChevronDownIcon className={styles.ButtonIcon} />
      </Menu.Trigger>

onClick is never called.

Expected behavior

onClick is called.

Reproducible example

https://codesandbox.io/p/sandbox/vigorous-tree-nl9y5q?file=%2Fsrc%2FApp.tsx%3A17%2C46

Base UI version

1.0.0-alpha.8

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Which assistive tech are you using (if applicable)?

Voiceover/JAWS etc.

Additional context

Provide any additional context that might help us identify the problem and find a solution.

[atomiks]

The internal backdrop covers the trigger after mousedown and so click (or mouseup) can never fire with the pointer. Keyboard usage does work though.

• modal={false} will prevent this
• onOpenChange will work

What's the use case for knowing if the trigger was clicked this way?

[OliverJAsh]

onOpenChange is a good workaround, it was just surprising to me that TypeScript reported onClick as a valid prop but at runtime it did nothing.

This might be important when composing with existing components that have their own click handlers.

[atomiks]

I wonder if the backdrop cutout prop that was added for Menubar should be added for all triggers when the popup is modal @michaldudak. This means the backdrop won't cover the trigger and block events (I think modal Dialog shouldn't have this, though? Although since that isn't triggered on mousedown, it shouldn't affect it to begin with)

[michaldudak]

Yeah, we can do it. This will also enable hover styles on a menu trigger while the menu is open.