primitives: [Dialog][DropdownMenu] Cannot compose `DropdownMenu.Item` and `Dialog.Trigger` in latest

@andrevenancio I realised today that the controlled composition without a trigger is not really advisable because you lose some accessibility (aria attributes and things for screen readers).

Here’s the way we’ll be proposing for now to keep things accessible https://github.com/radix-ui/primitives/pull/818/files#diff-8e744cac508a099375ef58105d63d5be33aebf4ba5d37db4d4630f425a460898R402

I’ll be having a think about ways we can improve this DX going forward but this at least provides a usable composition of the two in the meantime.

Having examples of Dropdown + Dialog composition in the docs would be really great, given how often we get asked about those. If anything it would make our life easier by having a place to point people to.

Added an issue here: https://github.com/radix-ui/website/issues/384

@andrevenancio You shouldn’t need your pointerEvents logic when the following PR is released https://github.com/radix-ui/primitives/pull/819 🎉

Keyboard should also be okay when this PR is released https://github.com/radix-ui/primitives/pull/818

Since your example is not using the Dialog.Trigger, I recommend manually returning focus to the DropdownMenu.Trigger from the dialog content’s onCloseAutoFocus event for accessibility purposes. Otherwise, keyboard users/screen readers will lose their place in the document.

Curious fact: if you add a disabled prop to the Dialog.trigger it works (by click only), which makes me think that some event handler is overwriting another instead of be composing them

I wonder if it is worth documenting this in the dropdown examples as I since realised a better way that allows the composition @jgoux was looking for: https://codesandbox.io/s/magical-grass-j85kbz?file=/src/App.js

it allows multiple items to open different dialogs.

@asherccohen does this help? https://codesandbox.io/s/confident-dan-lxsf9r?file=/src/App.tsx

That example above is not working for me.

Yes this is because of this :

The issue now is that if the Dialog is declared within the MenuContent, as soon as the MenuContent is closed, the Dialog is also unmounted as it’s a child of MenuContent.