React aria components are incompatible with Radix UI?

[Sliov]

Provide a general summary of the issue here

Tried to use the Button component as a Trigger for the Radix UI dropdown but it didn't work?

🤔 Expected Behavior?

No conflicts of props / events handler

😯 Current Behavior

The Button component prevents from triggering the dropdown menu

💁 Possible Solution

Not sure what's blocking here, this is outside my expertise

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/silent-bird-xlcdld

Version

1.0.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OSX

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

I noticed it works for via keyboard, but not mouse. It probably has something to do with us stopping propagation in usePress. I tried calling continuePropagation, but didn't have any luck with that.

Here is the radix source for handling the pointer event:
https://github.com/radix-ui/primitives/blob/c31c97274ff357aea99afe6c01c1c8c58b6356e0/packages/react/dropdown-menu/src/DropdownMenu.tsx#L117-L126

[devongovett]

Probably because we don't pass through DOM events at the moment, only onPress. However another problem is that Radix will ignore any event that has preventDefault called, so if we passed it through it would need to run before our handlers. https://github.com/radix-ui/primitives/blob/c31c97274ff357aea99afe6c01c1c8c58b6356e0/packages/core/primitive/src/primitive.tsx#L9

[arzatskis]

At work we're using this combo - need to use managed state for dropdown menus to work: here's work of your sandbox with updates: https://codesandbox.io/p/devbox/naughty-glade-9m523m?file=%2FApp.jsx - maybe this will help.

There's Issue is (and why I landed here 😅) though: when clicking on another dropdown menu trigger, previous one won't be closed. I guess it's related to stopped even propagation as @reidbarber mentioned.

Waiting for #5648 to land so we can ditch radix - one of the last components, not yet replaced with awesome rac

(there are a lot more issues when using rac and radix together - e.g. ran into problems and edge cases, with different focus scope management / issues when scrolling events lost etc.)

[criskell]

At work we're using this combo - need to use managed state for dropdown menus to work: here's work of your sandbox with updates: https://codesandbox.io/p/devbox/naughty-glade-9m523m?file=%2FApp.jsx - maybe this will help.

There's Issue is (and why I landed here 😅) though: when clicking on another dropdown menu trigger, previous one won't be closed. I guess it's related to stopped even propagation as @reidbarber mentioned.

Waiting for #5648 to land so we can ditch radix - one of the last components, not yet replaced with awesome rac

(there are a lot more issues when using rac and radix together - e.g. ran into problems and edge cases, with different focus scope management / issues when scrolling events lost etc.)

Hello! This Codesandbox link is offline.