Select Overlay with asChild is not passed children so it renders nothing

[billnye2]

Hi,

This issue is related to this line of code / the Overlay component as a whole:

const Overlay = React.forwardRef<OverlayRef, OverlayProps>(
  ({ asChild, forceMount, children, ...props }, ref) => {
    const { open } = useRootContext();

    const Component = asChild ? Slot.Pressable : Pressable;
    return (
      <>
        {open && <Component ref={ref} {...props} />}
        {children as React.ReactNode}
      </>
    );
  }
);

What is occurring is that when asChild is passed to Overlay, it will render Slot.Pressable, but the children aren't passed to it with {...props} because they are destructured in the function arguments, so props excludes children. The effect is that we see the error Slot.Pressable - Invalid asChild element in the console, and the Overlay does not render at all.

The reason I was interested in passing asChild to Overlay was to actually override it to instead use a View, not a Pressable. The reasoning for this is that react-native-web will swallow click events on Pressable, and does not bubble them up in the DOM (it calls stopPropagation). This breaks web expectations, and specifically on the web it breaks because Radix doesn't ever get the click event on the Overlay, and thus the Select dropdown won't close. Note: this occurs on mobile/touch only with Radix because with a mouse/pointer-device Radix waits for onPointerDown, but on mobile/touch it waits for a click event.

Extra: I've noticed a few (and there are probably many more) issues like this where Pressable swallows click events and breaks Radix. Even if you don't use Overlay with Select, this click-swallowing issue occurs when using a Select inside a Dialog, because the Dialog Overlay is a Pressable, and thus the Select does not close on mobile/touch. Spent a day debugging this stuff just to figure out it was react-native-web breaking things.

Thank you