[BUG] - Select doesnt work when put inside a Modal or a Drawer

[ItsZeusX]

HeroUI Version

2.6.14

Describe the bug

When i use a Select component inside a Modal (ModalBody) or a Drawer (DrawerBody) nothing happens, i even used the same Select inside a modal and outside it (in a simple div) and it works fin outside

PS : I tried deleting the packahe lock and deleted node_modules then reinstalled everything, i also tried Firefox :)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1 - Create a Modal component
2 - Create Select component
3 - Put the Select in the ModalBody of the Modal

Expected behavior

The list of options should appear as it did "outside" the modal

Screenshots or Videos

OUTSIDE

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-2000 [BUG] - Select doesnt work when put inside a Modal or a Drawer

[wingkwong]

Not able to reproducible. Please provide a sandbox.

[ItsZeusX]

I cant since this only happens when i migrate from NextUI to HeroUI, im not sure why, but when i did that (migrate), i had to add this to my vite config for the app to start , i dont know if this has anything to do with the problem :

PS : im on a monorepo (turborepo)

 resolve: {
    preserveSymlinks: true,
  },

UPDATE : Rolled back to 2.6.13 and it worked

[wingkwong]

is your repo public or ok to share?

[ItsZeusX]

Unfortunately not, i cant share the code sorry, thanks for your help tho

[Plesin]

I have the same issue in a Remix app. <Select /> works in a normal page, but not in a modal. Private GH repo unfortunately. Was looking for a heroui stackblitz but found only an old nextui where the migration was breaking.
Is there a stabkblitz or codesandbox where we can try?
Was working fine before the migration, Im using uncontrolled version. <DatePicker />in the same modal works, even when inspecting the DOM, datepicker adds the dropdown element, select won't

[Plesin]

I've tried so many things, including cerating a simplistic repo with very similar setup I have, it works there though.
https://github.com/Plesin/heroui-select
But sill cannot figure out why it's not working in my app, where I've migrated.
Observations:

• querying the button element in dev tools and triggering click programmatically works
• moving Modal components from "@heroui/modal" to "@heroui/react"; does not help

[wingkwong]

@Plesin have you tried the following steps: https://www.heroui.com/docs/guide/nextui-to-heroui#troubleshooting ?

[Plesin]

Hey @wingkwong I think I removed the lock file, but not sure about the node_modules. I guess I was expecting the lock file would be enough for the CI. Also working outside of the modal got me confused.
Anyhow I cleared that again now and works both locally and CI.

The migration using npx was super smooth.
HeroUI is very cool. Issue solved for me, thanks! 👍