When putting a Select inside a dialog or Sheet the hover effect on the select items doesn't work

[aamancio]

[aamancio]

My guess there some sort of issue with the z-index.

[minhson3012]

My guess there some sort of issue with the z-index.

I ran into this problem as well. When I open the Select dropdown for the first time I can hover just fine, but if I close and open it again hover stops working.

I noticed that if I clicked outside of Select (eg clicking on an input in the same form), the close event triggered twice and it will focus back on the Select trigger.

I tried to replicate it on codesandbox but couldn't.

[dukeeagle]

I'm facing the same issue!

[minhson3012]

I'm facing the same issue!

Try adding this into your package.json and let me know if it works for you

"resolutions": {
  "@radix-ui/react-focus-scope": "^1.0.4"
}

[step2341]

T

I'm facing the same issue!

Try adding this into your package.json and let me know if it works for you

"resolutions": {
  "@radix-ui/react-focus-scope": "^1.0.4"
}

have the same issue. tried the above and hasnt fixed. Does anyone have a fix?

[joaom00]

https://github.com/radix-ui/primitives/issues/2448#issuecomment-1758438552

[step2341]

radix-ui/primitives#2448 (comment)

@joaom00 i've tried this and it didnt appear to help. are you able to summarize the steps to implement?

[minhson3012]

radix-ui/primitives#2448 (comment)

@joaom00 i've tried this and it didnt appear to help. are you able to summarize the steps to implement?

What I did was that I added react-focus-scope and dismissable-layer into resolutions, deleted yarn.lock and node_modules and ran yarn again.

[step2341]

@minhson3012 thanks that worked. didn't realize i needed both. also note if using npm need to use "overrides" in place of resolutions..

[ManuDoni]

For me the solution using npm was:

"overrides": {
  "@radix-ui/react-dismissable-layer": "^1.0.5",
  "@radix-ui/react-focus-scope": "^1.0.4"
}

[lucasjinreal]

Where to add it?

[zaleGZL]

@lucasjinreal Add it to package.json file and then run npm install again~

[lucasjinreal]

Why this work?

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[moeyyad]

I believe this issue still exists. I am unable to use Clerk modal components inside a Shadcn Sheet, they show up but will not let me click on them

[robbyyt]

I believe this issue still exists. I am unable to use Clerk modal components inside a Shadcn Sheet, they show up but will not let me click on them

@moeyyad Encountering the same problem, did you manage to fix it?

[HTLA380]

Still having the same issue, only this solution works for me.

For me the solution using npm was:

"overrides": {
  "@radix-ui/react-dismissable-layer": "^1.0.5",
  "@radix-ui/react-focus-scope": "^1.0.4"
}

[hsavit1]

Issue still exists. Putting a Select in a Sheet gives behavior of SelectContent items being unselectable.

[akzone]

This works for me after remove .next, node_modules, package-lock.json

Finally npm i

For me the solution using npm was:

"overrides": {
  "@radix-ui/react-dismissable-layer": "^1.0.5",
  "@radix-ui/react-focus-scope": "^1.0.4"
}

[Brendon3578]

For me the solution using npm was:

"overrides": {
  "@radix-ui/react-dismissable-layer": "^1.0.5",
  "@radix-ui/react-focus-scope": "^1.0.4"
}

This works for me, thanks a lot, i installed the same dependencies but still don't know the why it works (using vite)

npm install @radix-ui/react-focus-scope
npm install @radix-ui/react-dismissable-layer

[YagoLeite]

This works for me after remove .next, node_modules, package-lock.json

Finally npm i

For me the solution using npm was:

"overrides": {
  "@radix-ui/react-dismissable-layer": "^1.0.5",
  "@radix-ui/react-focus-scope": "^1.0.4"
}

I've finally been able to solve this issue. Thanks everyone

[littlebutt]

For me the solution using npm was:

"overrides": {
  "@radix-ui/react-dismissable-layer": "^1.0.5",
  "@radix-ui/react-focus-scope": "^1.0.4"
}

Issue still exists and it does not work if placing a Date Picker on a Drawer.

[Hamzi-SE]

I am encountering the same issue when using Clerk's UserButton in Sheet. I also tried the overrides, but it didn't fix the problem.

My repo: https://github.com/Hamzi-SE/discord-clone

Edit: Fixed it using this code:

<UserButton
        appearance={{
          elements: { userButtonPopoverCard: { pointerEvents: "initial" } },
        }} 
/>

[kamtoeddy]

For me the solution using npm was:

"overrides": {
  "@radix-ui/react-dismissable-layer": "^1.0.5",
  "@radix-ui/react-focus-scope": "^1.0.4"
}

Issue still exists and it does not work if placing a Date Picker on a Drawer.

Faced this problem too. Here's what helped me https://github.com/shadcn-ui/ui/issues/910#issuecomment-1770255810

[cupid20103]

This issue related with this.

So is there any solution for this problem?

[cupid20103]

Wow, I've solved this problem. In my case, that is related with z-index. I've updated the select.tsx file.