RAC - MenuTrigger executed on press start, causing unexpected behaviour

[jamesopstad]

Provide a general summary of the issue here

The MenuTrigger component is executed on press start. If another element is rendered under the pointer on press end then it is triggered unintentionally.

🤔 Expected Behavior?

Releasing the pointer after launching the menu should not trigger other events on the page.

😯 Current Behavior

If another element is rendered under the pointer on press end then it is triggered unintentionally.

💁 Possible Solution

Change the behaviour so that MenuTrigger event is executed on press end. If it is essential to keep the current behaviour then press end events should be prevented during the same interaction.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/s/elated-panini-gxzjnr?file=/src/App.js

This CodeSandbox demonstrates the issue. Clicking the button and then releasing immediately closes the menu.

Version

"react-aria-components": "1.0.0-beta.2"

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

macOS 12.6.5

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

This behavior is intentional and I don't think we would necessarily want to change this default behavior:

react-spectrum/packages/@react-aria/menu/src/useMenuTrigger.ts

Lines 111 to 112 in 0e7d746

	onPressStart(e) {
	// For consistency with native, open the menu on mouse/key down, but touch up.

That being said, we could potentially add a new trigger option. Currently we have 'press' | 'longPress' but we could potential add pressend to handle use cases like this.

It seems like we could also look at treating the press event differently based on how long it lasts. I'm looking at this example from floating-ui and it seems to have good behavior that handles both cases.

[snowystinger]

I think we could also consider using pointer capture to prevent the press end from getting to the elements in the overlay
https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture

[jamesopstad]

Thanks. I think both approaches are good and could be complementary. Pointer capture would solve the issue for the current press behaviour. Adding pressend as an additional trigger option also seems reasonable as this may be preferable for a particular use case.