saadeghi/daisyui

bug: Navbar dropdown doesn't close on the option click

Aravin opened this issue · 9 comments

Aravin commented

What version of daisyUI are you using?

4.7.0

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://www.exaful.com/

Describe your issue

image

The dropdown is getting closed after choosing the option.

github-actions commented

Thank you @Aravin for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

  • 👍1
saadeghi commented

When the site is an SPA, clicking on links doesn't actually change the page. Instead your JS framework replaces the content with the new content. So It is expected for the dropdown to stay open because it is still focused.

To close it, you can remove the focus from it using JS after the link is clicked.
Let me know if you have any questions

i0FFLINE commented

To close it, you can remove the focus from it using JS after the link is clicked. Let me know if you have any questions

any idea how to?

Aravin commented

I haven't done it yet. We have to use router/navigation and see the change in pathname accordingly modify the state of the navbar

i0FFLINE commented

I am stuck on the following:

  • under hamburger in the mobile version in the details submenu, language selection is not closing, but the menu itself is closing. i reopen it - language selection is still open.
    I use document.activeElement.blur(), but I understand that I need to close the whole menu in cascade.
    any ideas?
Aravin commented

share the actual code or code sample.

i0FFLINE commented 
<template>
    <div class="navbar py-1 px-2 bg-gradient-to-r from-slate-900 to-slate-600 text-light shadow-lg dark:shadow-none">
        <div class="flex-1">
            <a href="#" class="btn pl-1.5 btn-ghost text-xl">
                <Logo class="h-9 mr-3" /* SVG inside */ />
                {{ APP_NAME }}
            </a>
        </div>
        <div class="flex-none">
            <ThemeToggle class="h-full" /* SWAP inside */ />
            <!-- Mobile version navbar-hamberger -->
            <ul class="menu menu-horizontal pl-1 pr-0.5 gap-5 md:hidden">
                <li>
                    <div class="dropdown dropdown-bottom dropdown-end focus:outline-none active:outline-none p-0">
                        <div role="button" tabindex="0">
                            <svg>
                                <!-- cut -->
                            </svg>
                        </div>
                        <ul class="dropdown-content z-[1] menu bg-slate-700">
                            <li>
                                <details>
                                    <summary>{{ SELECTED_LOCALE }}</summary>
                                    <ul class="dropdown-content z-[1] menu bg-slate-700">
                                        <li v-for="(sli, slk) in SUPPORT_LOCALE_NAMES" :key="slk">
                                            <a href="#" onclick="document.activeElement.blur()">{{ sli }}</a>
                                        </li>
                                    </ul>
                                </details>
                            </li>
                            <li><a href="#" onclick="document.activeElement.blur()">Link1</a></li>
                            <li><a href="#" onclick="document.activeElement.blur()">Link2</a></li>
                            <li><a href="#" onclick="document.activeElement.blur()">Settings</a></li>
                            <li><a href="#" onclick="document.activeElement.blur()">Logout</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

...something lke that

  • 😕1