[BUG] - select component cannot be opened inside a modal (VITE - heroui-cli) #4876

mr-nexg · 2025-02-20T04:10:10Z

HeroUI Version

Describe the bug

While working on a project with Vite and Hero UI, I needed to place a form inside a modal. I had used the Select component in other parts of the project without any problem, but when I tried to place it inside the modal, the options did not appear.

I tried several solutions, such as updating Hero UI to the latest version, deleting and reinstalling node_modules, and clearing the cache, but nothing worked. To rule out project-specific problems, I created a new Vite project from scratch (using heroui cli) and tested it, but the problem persisted.

Even during testing, I noticed similar problems with other components, such as the dropdown.

import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  useDisclosure,
} from "@heroui/modal";
import { Button } from "@heroui/button";
import { Select, SelectItem } from "@heroui/select";

const animals = [
  { key: "cat", label: "Cat" },
  { key: "dog", label: "Dog" },
  { key: "elephant", label: "Elephant" },
  { key: "lion", label: "Lion" },
  { key: "tiger", label: "Tiger" },
  { key: "giraffe", label: "Giraffe" },
  { key: "dolphin", label: "Dolphin" },
  { key: "penguin", label: "Penguin" },
  { key: "zebra", label: "Zebra" },
  { key: "shark", label: "Shark" },
  { key: "whale", label: "Whale" },
  { key: "otter", label: "Otter" },
  { key: "crocodile", label: "Crocodile" },
];

export default function App() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();

  return (
    <>
      <div className="flex w-full h-screen justify-center items-center">

        <Button onPress={onOpen}>Open Modal</Button>
        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
          <ModalContent>
            {(onClose) => (
              <>
                <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
                <ModalBody>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
                    risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
                    quam.
                  </p>
                  <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
                    <Select className="max-w-xs" label="Select an animal">
                      {animals.map((animal) => (
                        <SelectItem key={animal.key}>{animal.label}</SelectItem>
                      ))}
                    </Select>
                  </div>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
                    risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
                    quam.
                  </p>
                  <p>
                    Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
                    adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
                    officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
                    nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
                    deserunt nostrud ad veniam.
                  </p>
                </ModalBody>
                <ModalFooter>
                  <Button color="danger" variant="light" onPress={onClose}>
                    Close
                  </Button>
                  <Button color="primary" onPress={onClose}>
                    Action
                  </Button>
                </ModalFooter>
              </>
            )}
          </ModalContent>
        </Modal>
      </div>
    </>
  );
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Create a new project with heroui-cli (npx heroui init my-heroui-app).
Select vite
Install the Select and Modal components.
Place the Select inside a Modal.
Run the project and check the behavior.

Expected behavior

Ensure the Select opens correctly and works without issues.

Screenshots or Videos

Operating System Version

Windows

Browser

Firefox

The text was updated successfully, but these errors were encountered:

linear · 2025-02-20T04:10:14Z

ENG-2115 [BUG] - SELECT COMPONENT CANNOT BE OPENED INSIDE A MODAL (VITE - HERO UI)

john-fowler · 2025-02-20T23:05:05Z

I can no longer open popovers inside a dialog, and was just coming here to open an issue for it. Thanks for beating me to it!

2.6.14: Works
2.7.0: Fails
2.7.2: Fails

leotaozeng · 2025-02-21T08:17:15Z

I'd like to work on it

leotaozeng · 2025-02-21T09:24:08Z

I can no longer open popovers inside a dialog, and was just coming here to open an issue for it. Thanks for beating me to it!

2.6.14: Works

2.7.0: Fails

2.7.2: Fails

Are you also using Windows?

leotaozeng · 2025-02-21T09:28:41Z

Update:

@mr-nexg I'm not able to reproduce your issue on my machine (Mac). Tried with a fresh project using Vite, copied and pasted your code, opened the site in both Chrome and Firefox, and didn't see the issue. Select is working fine inside a modal.

leotaozeng · 2025-02-21T09:30:59Z

Do you see any errors in your browser console? @mr-nexg

mr-nexg · 2025-02-21T15:21:26Z

¿Ves algún error en la consola de tu navegador? @mr-nexg

I didn't get any error in the console (both in the browser and in the terminal).

I have tried to create another project with cli (now), and now it works. I guess they must have updated it recently, because I opened the other project where I tried the first time and it doesn't work.

It seems strange to me, only in a few days “it was fixed”.

These are the dependencies of the project where it does not work.

"dependencies": {
    "@heroui/button": "2.2.10",
    "@heroui/code": "2.2.7",
    "@heroui/dropdown": "2.3.10",
    "@heroui/input": "2.4.10",
    "@heroui/kbd": "2.2.7",
    "@heroui/link": "2.2.8",
    "@heroui/modal": "^2.2.11",
    "@heroui/navbar": "2.2.9",
    "@heroui/select": "^2.4.13",
    "@heroui/snippet": "2.2.11",
    "@heroui/switch": "2.2.9",
    "@heroui/system": "2.4.10",
    "@heroui/theme": "2.4.6",
    "@heroui/use-theme": "2.1.2",
    "@react-aria/visually-hidden": "3.8.12",
    "@react-types/shared": "3.26.0",
    "clsx": "2.1.1",
    "framer-motion": "11.15.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "6.23.0",
    "tailwind-variants": "0.1.20",
    "tailwindcss": "3.4.16"
  },
  "devDependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "8.11.0",
    "@typescript-eslint/parser": "8.11.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "5.2.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "4.1.4",
    "postcss": "8.4.38",
    "prettier": "3.3.3",
    "typescript": "5.6.3",
    "vite": "^5.2.0",
    "vite-tsconfig-paths": "^4.3.2"
  }

And this one where it does work

"dependencies": {
    "@heroui/button": "2.2.13",
    "@heroui/code": "2.2.10",
    "@heroui/dropdown": "2.3.13",
    "@heroui/input": "2.4.13",
    "@heroui/kbd": "2.2.10",
    "@heroui/link": "2.2.11",
    "@heroui/modal": "^2.2.11",
    "@heroui/navbar": "2.2.12",
    "@heroui/select": "^2.4.13",
    "@heroui/snippet": "2.2.14",
    "@heroui/switch": "2.2.12",
    "@heroui/system": "2.4.10",
    "@heroui/theme": "2.4.9",
    "@heroui/use-theme": "2.1.5",
    "@react-aria/visually-hidden": "3.8.19",
    "@react-types/shared": "3.27.0",
    "clsx": "2.1.1",
    "framer-motion": "11.15.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "6.23.0",
    "tailwind-variants": "0.3.0",
    "tailwindcss": "3.4.16"
  },
  "devDependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "8.11.0",
    "@typescript-eslint/parser": "8.11.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "5.2.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "4.1.4",
    "postcss": "8.4.38",
    "prettier": "3.3.3",
    "typescript": "5.6.3",
    "vite": "^5.2.0",
    "vite-tsconfig-paths": "^4.3.2"
  }

leotaozeng · 2025-02-21T15:24:30Z

¿Ves algún error en la consola de tu navegador? @mr-nexg

I didn't get any error in the console (both in the browser and in the terminal).

I have tried to create another project with cli (now), and now it works. I guess they must have updated it recently, because I opened the other project where I tried the first time and it doesn't work.

It seems strange to me, only in a few days “it was fixed”.

These are the dependencies of the project where it does not work.

"dependencies": {
    "@heroui/button": "2.2.10",
    "@heroui/code": "2.2.7",
    "@heroui/dropdown": "2.3.10",
    "@heroui/input": "2.4.10",
    "@heroui/kbd": "2.2.7",
    "@heroui/link": "2.2.8",
    "@heroui/modal": "^2.2.11",
    "@heroui/navbar": "2.2.9",
    "@heroui/select": "^2.4.13",
    "@heroui/snippet": "2.2.11",
    "@heroui/switch": "2.2.9",
    "@heroui/system": "2.4.10",
    "@heroui/theme": "2.4.6",
    "@heroui/use-theme": "2.1.2",
    "@react-aria/visually-hidden": "3.8.12",
    "@react-types/shared": "3.26.0",
    "clsx": "2.1.1",
    "framer-motion": "11.15.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "6.23.0",
    "tailwind-variants": "0.1.20",
    "tailwindcss": "3.4.16"
  },
  "devDependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "8.11.0",
    "@typescript-eslint/parser": "8.11.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "5.2.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "4.1.4",
    "postcss": "8.4.38",
    "prettier": "3.3.3",
    "typescript": "5.6.3",
    "vite": "^5.2.0",
    "vite-tsconfig-paths": "^4.3.2"
  }

And this one where it does work

"dependencies": {
    "@heroui/button": "2.2.13",
    "@heroui/code": "2.2.10",
    "@heroui/dropdown": "2.3.13",
    "@heroui/input": "2.4.13",
    "@heroui/kbd": "2.2.10",
    "@heroui/link": "2.2.11",
    "@heroui/modal": "^2.2.11",
    "@heroui/navbar": "2.2.12",
    "@heroui/select": "^2.4.13",
    "@heroui/snippet": "2.2.14",
    "@heroui/switch": "2.2.12",
    "@heroui/system": "2.4.10",
    "@heroui/theme": "2.4.9",
    "@heroui/use-theme": "2.1.5",
    "@react-aria/visually-hidden": "3.8.19",
    "@react-types/shared": "3.27.0",
    "clsx": "2.1.1",
    "framer-motion": "11.15.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "6.23.0",
    "tailwind-variants": "0.3.0",
    "tailwindcss": "3.4.16"
  },
  "devDependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "8.11.0",
    "@typescript-eslint/parser": "8.11.0",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "5.2.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "4.1.4",
    "postcss": "8.4.38",
    "prettier": "3.3.3",
    "typescript": "5.6.3",
    "vite": "^5.2.0",
    "vite-tsconfig-paths": "^4.3.2"
  }

Cool. Can we close the ticket? @wingkwong

mr-nexg · 2025-02-21T15:37:31Z

I managed to solve it, although I had to create a vite project without heroui, configure and restructure the project (I have not advanced much so I have not had problems).
And manually install HeroUi, it worked for me.

I assumed the problem was the CLI, because in the dependencies, all components were installed “independently”.

"dependencies": {
    "@heroui/button": "2.2.10",
    "@heroui/code": "2.2.7",
    "@heroui/dropdown": "2.3.10",
    "@heroui/input": "2.4.10",
    "@heroui/kbd": "2.2.7",
    "@heroui/link": "2.2.8",
    "@heroui/modal": "^2.2.11",
    "@heroui/navbar": "2.2.9",
    "@heroui/select": "^2.4.13",
    "@heroui/snippet": "2.2.11",
    "@heroui/switch": "2.2.9",
    "@heroui/system": "2.4.10",
    "@heroui/theme": "2.4.6",
    "@heroui/use-theme": "2.1.2",
    "@react-aria/visually-hidden": "3.8.12",
    "@react-types/shared": "3.26.0",
    "clsx": "2.1.1",
    "framer-motion": "11.15.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "6.23.0",
    "tailwind-variants": "0.1.20",
    "tailwindcss": "3.4.16"
  },

Now in the new project, I have only as dependencies.

"dependencies": {
    "@heroui/react": "^2.7.2",
    "framer-motion": "^12.4.7",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.2.0"
  },

But testing now (hero cli), it works fine, at least with select, I guess there will be no problem with another component (similar to select).

mr-nexg changed the title ~~[BUG] - SELECT COMPONENT CANNOT BE OPENED INSIDE A MODAL (VITE - HERO UI)~~ [BUG] - select component cannot be opened inside a modal (VITE - heroui-cliI) Feb 20, 2025

mr-nexg changed the title ~~[BUG] - select component cannot be opened inside a modal (VITE - heroui-cliI)~~ [BUG] - select component cannot be opened inside a modal (VITE - heroui-cli) Feb 20, 2025

wingkwong assigned leotaozeng Feb 21, 2025

mr-nexg closed this as completed Feb 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] - select component cannot be opened inside a modal (VITE - heroui-cli) #4876

[BUG] - select component cannot be opened inside a modal (VITE - heroui-cli) #4876

mr-nexg commented Feb 20, 2025 •

edited

Loading

linear bot commented Feb 20, 2025

john-fowler commented Feb 20, 2025

leotaozeng commented Feb 21, 2025

leotaozeng commented Feb 21, 2025

leotaozeng commented Feb 21, 2025

leotaozeng commented Feb 21, 2025

mr-nexg commented Feb 21, 2025

leotaozeng commented Feb 21, 2025

mr-nexg commented Feb 21, 2025

[BUG] - select component cannot be opened inside a modal (VITE - heroui-cli) #4876

[BUG] - select component cannot be opened inside a modal (VITE - heroui-cli) #4876

Comments

mr-nexg commented Feb 20, 2025 • edited Loading

HeroUI Version

Describe the bug

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

Screenshots or Videos

Operating System Version

Browser

linear bot commented Feb 20, 2025

john-fowler commented Feb 20, 2025

leotaozeng commented Feb 21, 2025

leotaozeng commented Feb 21, 2025

leotaozeng commented Feb 21, 2025

leotaozeng commented Feb 21, 2025

mr-nexg commented Feb 21, 2025

leotaozeng commented Feb 21, 2025

mr-nexg commented Feb 21, 2025

mr-nexg commented Feb 20, 2025 •

edited

Loading