[Dialog][DropdownMenu] Add Dialog/DropdownMenu composition examples

[benoitgrelard]

See https://github.com/radix-ui/primitives/issues/634

[andy-hook]

Posting as a reminder, two good options for composition depending on requirements:

Composing dialog outside of content: https://codesandbox.io/s/dropdownmenu-dialog-nszobq?file=/src/App.js

Composing dialog inside content (preventing close and visually hiding): https://codesandbox.io/s/magical-grass-j85kbz?file=/src/App.js

[djalmaaraujo]

@benoitgrelard @andy-hook I am having a hard time making it work using the radix 1.0.0 Dialog + Dropdown, and I also want to ask: Is the Portal required? Because in the examples above, there is no usage of DropdownMenu.Portal wrapping the content.

Example using Radix customized: https://deploy-preview-100--vip-design-system-components.netlify.app/?path=/story/dropdown--with-dialog-state

Code: https://github.com/Automattic/vip-design-system/pull/100/files#diff-fdb6505fd60550e49193e92070575f4fee2eba1ce4cd9240e8932e4b3065f9deR118

The problem is:

• User clicks to open a dropdown
• Chose the option: "Click here"
• Dialog opens but with no Focus
• User presses the ESCAPE key, and everything closes
• User tries to navigate, but no keyboard is working anymore

[djalmaaraujo]

@benoitgrelard I was able to create an example with everything I have on my local machine, working: https://codesandbox.io/s/pensive-frost-p03qy7?file=/App.js

• Radix Dialog 1.0.0
• Radix DropdownMenu 1.0.0
• React 17.0.1
• Using the same example as the Dropdown Menu describe in Radix Documentation page (a simplified version)

But for some reason, when I use all these in my local library, the focus doesn't go to the dialog once the trigger happens. Do you have any possible idea why the focus doesn't go to the Dialog when it opens? In this example above, it's working correctly, but using all of it together outside of the code sandbox, it doesn't. Do you believe it has to do with Portals?

[benoitgrelard]

@benoitgrelard I was able to create an example with everything I have on my local machine, working: https://codesandbox.io/s/pensive-frost-p03qy7?file=/App.js

• Radix Dialog 1.0.0
• Radix DropdownMenu 1.0.0
• React 17.0.1
• Using the same example as the Dropdown Menu describe in Radix Documentation page (a simplified version)

But for some reason, when I use all these in my local library, the focus doesn't go to the dialog once the trigger happens. Do you have any possible idea why the focus doesn't go to the Dialog when it opens? In this example above, it's working correctly, but using all of it together outside of the code sandbox, it doesn't. Do you believe it has to do with Portals?

I don't think it would have anything to do with portals no. A bit difficult to know what's going on in your app as it's all working fine in that sandbox.