Select component doesn't open when placed within a modal.

[neakoh]

NextUI Version

5.4.11

Describe the bug

The select box seems like it's activated but the select options won't show.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Make modal.
2. Make select in modal.
3. Open modal.
4. Try open select.

Expected behavior

Expected the select to display its select items.. but alas, it did not.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-1819 Select component doesn't open when placed within a modal.

[wingkwong]

couldn't reproduce. please provide a minimal reproducible environment.

399034458-ab0b0a2c-f004-444a-ad8b-f722473f30c6.webm

[neakoh]

Can I see the code you used to create that?

[wingkwong]

I took the example from select storybook and paste to modal storybook.

<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
  <ModalContent>
    {(onClose) => (
      <>
        <ModalHeader className="flex flex-col gap-1">Log in</ModalHeader>
        <ModalBody>
          <Input
            autoFocus
            endContent={
              <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
            }
            label="Email"
            placeholder="Enter your email"
            variant="bordered"
          />
          <Input
            endContent={
              <LockFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
            }
            label="Password"
            placeholder="Enter your password"
            type="password"
            variant="bordered"
          />
          <Select className="max-w-xs" label="Select country">
            <SelectItem key="argentina">Argentina</SelectItem>
            <SelectItem key="venezuela">Venezuela</SelectItem>
            <SelectItem key="brazil">Brazil</SelectItem>
          </Select>
          <div className="flex py-2 px-1 justify-between">
            <Checkbox
              classNames={{
                label: "text-sm",
              }}
            >
              Remember me
            </Checkbox>
            <Link color="primary" href="#" size="sm">
              Forgot password?
            </Link>
          </div>
        </ModalBody>
        <ModalFooter>
          <Button color="danger" variant="flat" onPress={onClose}>
            Close
          </Button>
          <Button color="primary" onPress={onClose}>
            Sign in
          </Button>
        </ModalFooter>
      </>
    )}
  </ModalContent>
</Modal>