ozziexsh/laravel-jetstream-react

Dropdown Link not working

Closed this issue · 5 comments

Refering to Profile and Logout
The dropdown link is not working properly, I can't click it, btw, I can access the routes it takes me to.

Screenshot 2022-05-16 at 05 56 25

Also, got this error on SSR
Screenshot 2022-05-16 at 06 10 48

So, I found out that it had something to do with this properties of the Transition component inside Dropdown.tsx

enter="transition ease-out duration-200" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95"
Because if you remove this props it will work

thanks for flagging this!

it looks like the dropdown is fighting for z-index with the hidden overlay, even though the overlay has 40 and the dropdown has 50

i just tried this locally and it seems that the issue is that the actual <Transition> element needs to have the z-index applied instead of the child div that it renders

adding this as the last prop to the <Transition> element should fix it

in resources/js/Jetstream/Dropdown.tsx:

<Transition
    show={open}
    enter="transition ease-out duration-200"
    enterFrom="transform opacity-0 scale-95"
    enterTo="transform opacity-100 scale-100"
    leave="transition ease-in duration-75"
    leaveFrom="transform opacity-100 scale-100"
    leaveTo="transform opacity-0 scale-95"
+   className={'relative z-50'}

I'm not sure as to why this is only happening now but I'll investigate what changed later when I can get a proper release built

i haven't had a chance to try the ssr error yet but i'm guessing it might be related and possibly something to do with an update to headless ui maybe

i'll check that out when i look into the above comment

this is fixed in v0.3.3

if you want to apply the changes to your existing project check out this diff

https://github.com/ozziexsh/laravel-jetstream-react/pull/20/files

otherwise make sure to always generate new projects with the @latest tag as specified in the readme

npx laravel-jetstream-react@latest install

as for your SSR issue, it seems that you don't have this check in your Modal.tsx file that was added about a month ago with ssr

https://github.com/ozziexsh/laravel-jetstream-react/blame/main/src/stubs/resources/js/Jetstream/Modal.tsx#L26

please see if that fixes your issue (or generate a new project with the latest tag) and if not please open a new issue with more details 😄

thanks for bringing this issue to my attention