search

tailwindlabs / tailwindui-issues

Bug fixes and feature request tracking for Tailwind UI.
233 stars 4 forks source link

Catalyst Navbar doesn't scope use of motion based animation #1606

Open garyhuntddn opened 2 months ago

garyhuntddn commented 2 months ago

What component (if applicable)

Describe the bug Add two Navbars to a page, with a few NavbarItems in each, mark one as current in each Navbar.

On initial render the NavbarItems that are marked as current will each have an underline, but a soon as one of the others are chosen the two selection indicators animate into a single one.

Expected behavior Each Navbar instance would scope the ID of the motion based animations.

Browser/Device (if applicable) All OS and browser

Additional context I've implemented a dirty fix by adding a motionId prop to the NavbarItem component but I think the nicest solution would involve a Context in the Navbar allowing the NavbarItem to resolve its parent Navbar and retrieve an id created using useId()

reinink commented 6 days ago

Hey! Apologies on the delay here.

So I've been trying to reproduce this, and have not been able to. I can add multiple Navbar components to the page, each having a different NavbarItem marked as current, and the underline animation works without any issues.

Here's a contrived example to illustrate this:

https://github.com/user-attachments/assets/b37b59a9-27fb-4f45-86a8-57067a9c847e

Maybe I'm just not doing the right thing to reproduce this issue though — are you able to provide me with a minimal reproduction? (Sorry, I know you were dealing with this all the way back in June, so totally appreciate if you've long moved on.)

To be honest the Navbar component was designed primarily for use in the layout components, and we didn't really expect it to be used on it's own — although I guess you technically can!

garyhuntddn commented 4 days ago

Hey - thanks for getting back to me.

I've create a private repo (don't want to share the catalyst code publicly) and added you to it.

https://github.com/garyhuntddn/catalyst-navbar-bug

I've also included my "hack" that keeps the navbar's independent of each other.

Hopefully the text in the page shows you what I'm experiencing and what I think it ought to do.

PS I agree that the sensible default is that the layoutId of the motion.span component is left global to maintain backward compatibility