Hover Card Content can't be focused inside Dialog

[bogdansoare]

Bug report

The Hover Card content closes inside the Dialog even though is hovered.

Current Behavior

Screen.Recording.2021-10-15.at.14.15.06.mov

Expected behavior

The hover card content should remain open when hovered

Reproducible example

https://codesandbox.io/s/confident-albattani-ckgqr?file=/App.js

Suggested solution

The dialog and the hover card are in 2 different portals, so maybe there needs to be a way to specify that the hover card portal should be on top.

Your environment

Software	Name(s)	Version
Radix Package(s)	react-dialog, react-hover-card	0.1.1
React	n/a	17
Browser	Chrome	94
Operating System	mac OS	Big Sur

[benoitgrelard]

Hi @bogdansoare thanks for the detailed bug report! Definitely looks like there's something not quite right here. We'll take a look. 🙏

[andy-hook]

Looks like an issue with the disabling of pointer events from the modal dialog.

@bogdansoare As a temporary workaround if you set pointerEvents to auto on HoverCardContent it should work as expected:

https://codesandbox.io/s/blissful-glitter-c0mkm?file=/App.js

[benoitgrelard]

Ohhh good catch @andy-hook! That would be because HoverCard doesn't use DismissableLayer! Something to think about here, we may need to split things up a bit as we are currently assuming only components that use it take part in the layering logic. Need to see if we just use it (some pieces of it, even though some aren't needed) or if we can split it up.

[bogdansoare]

@andy-hook it worked like a charm, thank you for the workaround 🙏

@benoitgrelard thank you for the fast response and for taking a deeper look at this issue 🙏 . Please let me know if there is something that I can help with

[kmlrmdhn]

   {catalog?.map((item, i) => (
                      <DropdownMenuItem
                        onClick={() => handleDownload(item)}
                        key={i}
                      >
                        {item?.name}
                      </DropdownMenuItem>
                    ))}
                </HoverCardContent>
                
                on, still doesnt work.
                
                can anyoone help me?
                
                @andy-hook 
                @bogdansoare