In my Blazor webassembly app, I'm using a Bulma dropdown component and I have a Logout button inside a togglable dropdown content.
Here is the HTML of my Logout button.
<div id="userMenu" class="dropdown is-right @(UserMenuCollapsed ? "is-active" : null)" @onclick="ToggleUserMenu" @onfocusout="FocusOutHandler"><div class="dropdown-trigger p-1"><button class="bg-green-300 rounded-full h-10 w-10 flex items-center justify-center border-none cursor-pointer" aria-haspopup="true" aria-controls="user-menu">AR</button></div><div class="dropdown-menu" id="dropdown-menu" role="menu"><div class="dropdown-content"><NavLink href="/profile" Match="NavLinkMatch.All" class="dropdown-item"> Profile (@context.User.Identity.Name)</NavLink><hr class="dropdown-divider"><button class="dropdown-item" @onclick="BeginSignOut">Log out</button></div></div></div>This piece of HTML get displayed when I click the #userMenu div element. Now when I click the Logout button nothing happens.
On googling I found like sometimes changing the @onclick to @onmousedown parameter will make the click action to work. I changed it and it worked, but not sure why. Can anyone explain what happens under the hood?
After reading Umair's comments, I have tried to use "event stop propagation" but that doesn't seem to work.
Here is the updated code:
<div id="userMenu" class="dropdown is-right @(UserMenuCollapsed ? "is-active" : null)" @onclick="ToggleUserMenu" @onfocusout="FocusOutHandler"><div class="dropdown-trigger p-1"><button class="bg-green-300 rounded-full h-10 w-10 flex items-center justify-center border-none cursor-pointer" aria-haspopup="true" aria-controls="user-menu">AR</button></div><div class="dropdown-menu" id="dropdown-menu" role="menu"><div class="dropdown-content"><NavLink href="/profile" Match="NavLinkMatch.All" class="dropdown-item"> Profile (@context.User.Identity.Name)</NavLink><hr class="dropdown-divider"><button class="dropdown-item" @onclick="BeginSignOut" @onclick:stopPropagation="stopPropagation">Log out</button></div></div></div>@code { private bool stopPropagation = false;}