Radix primitive within another primative #3056
Unanswered
PaddaSecurity
asked this question in
Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Prefix - I am building a NPM package that builds forms and exports those JSX components. We are using Radix UI (ShadcnUI flavor) under the hood.
I tested the library in a test Next.js app that is using Radix UI (ShadcnUI flavor) primitives as well. Specifically I am testing the component and then rendering the form inside of it.
The issue - when I open the sheet component, the form has elements that aren't intractable. The component doesn't have a hover state, you can select the element, but there is no hover state. The component that is imported from the library is what is having issues. It's almost like the Radix primitives inside of it don't know you are within an opened dialog or sheet. The NPM package code for the Select is just the normal ShadcnUI flavor of Radix. When I built a custom dialog component using just Tailwind css the Form worked perfectly and the interactions all were correct. So the issue is with the and Radix primitives. Was wondering if someone ran into this before? Thank you!! If anyone needs clarifying questions, I am happy to answer! The NPM package isn't open source, but I can setup a dummy repo for you if anyone would like. So you will see in the video, the first works great - that is the one that is coming from the text Next.js projects /ui folder.
The second popover is coming from the NPM package - it has no hover state
When I use a non Radix UI modal/sheet - it works perfect
Screen.Recording.2024-08-08.at.11.26.59.AM.mov
Beta Was this translation helpful? Give feedback.
All reactions