react-native-reusables icon indicating copy to clipboard operation
react-native-reusables copied to clipboard

[ BUG ] Select used inside a AlertDialog won't have the values popped in the top layer

Open guibzo opened this issue 9 months ago • 2 comments

If I use the AlertDialog component with a Select on its inside, the select values won't pop up on the top layer:

Image

To reproduce:

  <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">
            <Text>Show Alert Dialog</Text>
          </Button>
        </AlertDialogTrigger>

        <AlertDialogContent>
          <Select>
            <SelectTrigger>
              <SelectValue
                className="native:text-lg text-sm text-foreground"
                placeholder={"Select the problem"}
              />
            </SelectTrigger>

            <SelectContent avoidCollisions>
              <SelectGroup>
                <SelectItem label="Apple" value="apple">
                  Apple
                </SelectItem>

                <SelectItem label="Banana" value="banana">
                  Banana
                </SelectItem>

                <SelectItem label="Blueberry" value="blueberry">
                  Blueberry
                </SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </AlertDialogContent>
      </AlertDialog>

guibzo avatar Feb 26 '25 14:02 guibzo

Hey @guibzo , check the /ui/alert-dialog.tsx file for a z-index class z-50 and remove it if you have it. If that doesn't fix it, please provide a minimal reproduction repo

mrzachnugent avatar Feb 26 '25 14:02 mrzachnugent

Hey @guibzo , check the /ui/alert-dialog.tsx file for a z-index class z-50 and remove it if you have it. If that doesn't fix it, please provide a minimal reproduction repo

Removed the z-50 from the overlay and content components and that fixed it I don't know if this is intended on this case tho, since those classes got added in the own installation and were not modified Thanks for the quick response too!

guibzo avatar Feb 26 '25 14:02 guibzo

Closed due to missing repo. Should be fixed with latest updates: https://reactnativereusables.com/docs/changelog#august-2025-fullwindowoverlay-ios

mrzachnugent avatar Aug 22 '25 18:08 mrzachnugent