saadeghi
commented
2 years ago dropdown works with focus. when you have a component on multiple pages and you go to the second page by clinking on a link, the dropdown will not lose focus (because it's not getting re-rendered) so it stays open. You can close the dropdown be taking its focus using JS.
With Vue, you should be able to do it like this:
@click="(e) => e.target.blur()"Let me know if you have any questions
Introduction
Hello friends from Daisy UI!
First of all I'd like to extend my appreciation to the creator of the package and everybody else involved in the project, directly and indirectly. I've found the package when I needed free decent crafted Tailwind CSS components that I could use to speed up the development of a side project of mine. Daisy UI not just fits the bill but it is making my project look very pretty and professionally designed, which is impressive for a backend focused engineer like me. :sweat_smile:
The issue
"We're not perfect, but we want to do the right thing." -
Charlie BellThe little issue I am facing with Daisy UI is about the Nuxt layouts. When navigating through different pages utilizing the same layout component the nav component doesn't re-render, just the inner content of the page so the nav dropdown doesn't go away when in hamburger mode (mobile). Some workarounds could be applied, for example, creating different layouts for each link on the nav, however that would defeat the whole purpose of layouts in Nuxt. Another workaround would be forcing the nav component to re-render when the user navigates using the dropdown and this will be my approach until I can find a better solution.
How to Reproduce
"This is one of the most important lessons of the scientific method: if you cannot fail, you cannot learn." -
Eric RiesReproducing this issue is very simple. First create a new Nuxt project, add Daisy UI, create a nav component and paste Daisy UI's HTML. Then create a layout and put the nav component in it. Finally, create a few pages that utilizes the same layout and hook up the links to these pages on the nav component using the nuxt-link component. That's all it takes to reproduce the issue I am personally facing. I apologize for not creating a CodePen or similar at this point. I just wanted to create the issue before I forget about it but I definitely can come back and generate a testing example online.
Conclusion
"The belly is an ungrateful wretch, it never remembers past favors, it always wants more tomorrow." -
Aleksandr SolzhenitsynI am someone who doesn't really opens GitHub issues. I usually find a workaround to what I need to accomplish and move forward. And that's because I understand that every project is different and it is impossible to fit an open source project to all of them . That said, maybe this is not an issue at all and should not be addressed and that's ok. Maybe there's something else that I am completely missing that would solve my challenge elegantly, and if that's the case, please feel free to drop your ideas. This time I decided to open this issue because I believe that the Vue/Nuxt community is growing and maybe this issue could help Daisy UI in any way. :smiley: Again, thank you so much for making Daisy UI available and free. I really appreciate all the work you guys put in it. Cheers!