ecklf / tailwindcss-radix

Utilities and variants for styling Radix state
https://tailwindcss-radix.vercel.app
MIT License
2.09k stars 67 forks source link

Missing DialogPrimitive.Portal in Dialog demos #26

Closed dcos96038 closed 1 year ago

dcos96038 commented 1 year ago

Hi, I'm new to the library, I was learning how to use radix + tailwind and discovered an issue with the dialog demo. dialogbug There is a side effect when using flex + gap because the Transitions aren't wrapped with DialogPrimitive.Portal component.

<DialogPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
      <DialogPrimitive.Trigger asChild>
        <Button>Click</Button>
      </DialogPrimitive.Trigger>
      <DialogPrimitive.Portal> // <---- Here!
          <Transition.Root show={isOpen}>
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0"
              enterTo="opacity-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
            >

Thank you for the library, and the demos are fantastic!

ecklf commented 1 year ago

Good to know, I'll update the examples (you might need the forceMount prop when using the Transition)