Help debug popover/dialog

[Faithfinder]

I have a weird interaction between DialogTrigger/Popover/Dialog and react-select library (used for multiselect component). The components themselves are fairly complex, so I don't have a minimal repro. Also, I don't think it is either library's fault, I'm probably making a silly mistake somewhere. Still, I'm out of ideas and would like some help debugging =P

The interaction is that when a specific value is selected in react-select, clicking on it opens select's menu for a split second, and then both react-select menu and the popover close. I'd make a gif, but apparently the popover is also not captured via ffmpeg? Sorry.

I've checked the following:

1. It's not mounting/unmounting shenanigans.

useEffect(() => {
  console.log('mount')
  return () => console.log('unmount')
}, [])

shows that the component is mounted throughout the process.
2) It's not registering as a click outside the popover - shouldCloseOnInteractOutside event of the popover is never called.
3) It's not manually calling any of the render props close.
4) The component is controlled. onOpenChange is properly called when the component closes.
5) It's not a keyboard interaction, of course.

The question I have for this community is, how can a controlled Popover close of it's own will? What other triggers could there be besides an outside click, change the controlled state, or calling the close render prop?

[snowystinger]

Can you use a console.trace from onOpenChange when it closes to see what's causing it to close?

[Faithfinder]

onScroll

I also found a repro, so the picture is somewhat clearer now, thanks!

1. Have the popover at the bottom of the window, but so that the dialog still fits between the trigger and the bottom edge
2. Have a long enough list in react-select that it doesn't fit on screen

If you look at the screenshot below, the closing would happen if the edge of the window was at the red line, instead of where it is.

Hmm... I'm not even sure what I think about this. A bit puzzling

[snowystinger]

I'm not sure where that aria-select is being portaled to or if it causes a scroll when there isn't much space, but I know it can be hard to use a popover from another library inside our popovers. It's something we're actively working to improve.

In the meantime, it may be easier to use our tags and our select to create a similar experience. I know we don't have a TagField yet, but there have been some discussions on implementing one in the Issues/Discussions.

If a simplified example can be created, we may be able to assist more with debugging and making sure we cover this case in the future. Thank you!