Menu trigger items events are blocked

[ambethia]

🐛 Bug report

I am unable to style the :active state of a menu trigger item (e.g. a button).

💥 Steps to reproduce

1. Have a trigger with styles for :active the pseudo-class.
2. Press the trigger.

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/p/sandbox/mc532c

🧐 Expected behavior

I expect to see the :active pseudo-class applied to my trigger while pressed.

🧭 Possible Solution

I narrowed this down to the event.preventDefault() in onPointerDown(event) on getTriggerProps(). If I remove the preventDefault() it does work as expected, the event bubbles up to the native element so we can style it.

If stopping the propagation of this event is necessary, can we add some data-* attribute to the trigger props that can be hooked so this state can be styled? Right now it doesn't appear anything in the DOM changes for the element until the mouse is released.

🌍 System information

Software	Version(s)
Zag Version	0.80.0
Browser	Firefox
Operating System	macOS

📝 Additional information

I have a button that animates slightly on hover and depresses when clicked. Currently, the animation stays locked in the :hover state until the menu is opened (on mouse up). I can style it's open state to appear depressed once the mouse is released, but this feels jarring and it doesn't behave like the other "native" buttons.

Here's the current behavior; the circle around cursor indicated the mouse is pressed:

no-active.mov

Here's what it looks like if I comment out the event.preventDefault():

active.mov

[segunadebayo]

This is by design since the focus should always remain on the menu content.

I recommend applying a data-active attribute on the item during pointerdown and removing it on pointerup or menu content blur

We'll consider adding this in the future.