[ BUG ] Select element is hidden behind Dialog

[DonBraulio]

Describe the bug Rendering for web, the <Select> options are not visible when the component is inside a popup <Dialog>. The options are hidden behind the dialog (see screenshot).

It seems like a zIndex issue but I tried modifying the code from dialog.tsx to z-10 instead of z-50, still doesn't work. So if anyone has a quick workaround, it's very much appreciated.

To Reproduce Change the starter-base/app/index.ts by the code below (Additional context) and run npm run web.

Expected behavior The Select should be visible even if used inside a Dialog element.

Screenshots The <Select> in the image is opened: looking closely, see the last options behind the black overlay (at the bottom of the dialog).

Platform (please complete the following information):

• Type: Browser, web
• OS: OSX
• Browser: Chrome

Additional context Reproduce the bug by changing starter-base/app/index.tsx code from the repo:

import * as React from 'react';
import { View } from 'react-native';
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '~/components/ui/dialog';
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '~/components/ui/select';

export default function Screen() {
  return (
    <View className='flex-1 justify-center items-center gap-5 p-6 bg-secondary/30'>
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="secondary" size="sm" className="flex-row">
            <Text>See issue</Text>
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[625px]">
          <DialogHeader>
            <DialogTitle>My dialog</DialogTitle>
          </DialogHeader>
          <View className="aspect-video">
            <Select defaultValue={{ value: "apple", label: "Apple" }}>
              <SelectTrigger className="w-[250px]">
                <SelectValue
                  className="text-foreground text-sm native:text-lg"
                  placeholder="Select a fruit"
                />
              </SelectTrigger>
              <SelectContent className="w-[250px]">
                <SelectGroup>
                  <SelectLabel>Fruits</SelectLabel>
                  <SelectItem label="Apple" value="apple">
                    Apple
                  </SelectItem>
                  <SelectItem label="Banana" value="banana">
                    Banana
                  </SelectItem>
                  <SelectItem label="Blueberry" value="blueberry">
                    Blueberry
                  </SelectItem>
                  <SelectItem label="Grapes" value="grapes">
                    Grapes
                  </SelectItem>
                  <SelectItem label="Pineapple" value="pineapple">
                    Pineapple
                  </SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </View>
        </DialogContent>
      </Dialog>
    </View>
  );
}

[mrzachnugent]

@DonBraulio The latest version of the dialog does not use z-index because of this reason. Please try to remove the z-index class and if that doesn't work, try with the latest version of the Dialog from rnr.

If both of those still fail, please provide a minimal reproduction repo