Laravel-Backpack / theme-tabler

UI for Backpack v6 that uses Tabler and Bootstrap v5.

MIT License

21 stars 12 forks source link

[Bug] Nested dropdowns don't work on mobile #149

Closed pxpm closed 4 months ago

pxpm commented 9 months ago

Bug report

What I did

I am 100% sure that this was working. Somehow it's not working anymore 🤡

In fact when I opened the issue https://github.com/Laravel-Backpack/demo/issues/574#issuecomment-1717406610 to test, it was working locally and failing in our online demo like @karandatwani92 pointed out. After some updates, it's gone.

At this moment it's not working anywhere, so I suspect we may have broken it in the meanwhile, but I've spend way more time than I would like here and still not able to find the root cause for it to fail now, so I am writing this down, maybe I have an ha-ha moment.

It works just fine on CoreUI themes (v2 and v4).

In tabler the mobile menu only open the first dropdown, the nested ones when clicked just close the parent without opening the child.

If anyone has a bright idea here, fine, otherwise I will revisit this later this week.

StefanPrintezis commented 8 months ago

Probably related to bs-auto-close being enabled by default on desktop header, it seems to break if there are multiple active dropdowns, by using the same href multiple times.

Not neceserally on mobile, but on desktop too

pxpm commented 8 months ago

Hey @StefanPrintezis thanks for the feedback. 🙏

What's the purpose of using the same routes multiple times? I am genuinely asking, because I usually either create operations for specific scenarios, like user/1/activate, or users/blocked (instead of adding users?blocked=true to activate some filter).

Let me know if you think we should handle that scenario in a different way, or if there are use cases that I am missing.

Cheers

StefanPrintezis commented 8 months ago

The mobile menu would be in your <aside> and the desktop menu would be in your <header>, both having the same route

This would match both

[...document.querySelectorAll('aside a[href], header.top a[href]')]

https://github.com/Laravel-Backpack/theme-tabler/blob/1afe83382194d776717804ca9ea4a1e82e398ccc/resources/assets/js/tabler.js#L14C1-L14C67

pxpm commented 8 months ago

Thanks @StefanPrintezis for the clarification. I will investigate it and get back to you 🙏

pxpm commented 4 months ago

This should be fixed in 1.2.1 released earlier today.

Sorry it took a little bit to get to fix this, hope everything is right now.

If not, please re-open 🙏