Blazor - Prevent sibling event from firing ( onclick > onfocusout )

Question

I'm creating my own autocomplete input in Blazor. (something like below)

function FocusOut()
{
  document.getElementById("list-item-one").innerHTML = "Focus out";
}

function Click()
{
  document.getElementById("list-item-one").innerHTML = "Click";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" onfocusout="FocusOut()" />
<ul class="dropdown">
  <li id="list-item-one" onclick="Click()">List Item One</li>
</ul>

When I click on the list item, the onfocusout event fires instead of the onclick event. Is there a way to "push" the onclick event?

This isn't a parent child relation, so "stopPropagation" has no effect. Also I know there is a datalist tag, but i'm not using it because of the way it look, feels and behaves in the different browsers.

Can you add the function implementations to the question? If you remove the ```Clear()``` function and replace it with some empty void function, does it work? — Grizzlly, Nov 22 '21 at 18:16
No it does not, it's only a void that sets the bool "showDropdown" to false. — Reptar, Nov 22 '21 at 18:34
Update your question with code or create a fiddle so we can test solutions. — Grizzlly, Nov 22 '21 at 18:41
At first sight, the problem is that ```onclick``` executes after the ```onfocusout``` event, at which point the dropdown is closed. Try replacing ```onclick``` with ```onmousedown```, but depending on what you want to do, you might not want the dropdown to close... — Grizzlly, Nov 22 '21 at 18:44
I have updated my code with working javascript. There the events execute after each other. But that being said, the onmousedown instead of onclick works like a charm. Thanks! — Reptar, Nov 22 '21 at 19:02

score 4 · Accepted Answer · answered Nov 22 '21 at 19:47

The problem is that the order of events is OnMouseDown, OnFocusOut, OnClick.

Because of this, your dropdown closes before the OnClick event, so the click is not registered.

A working solution is to replace OnClick with OnMouseDown.

Based on this answer by @DuncanLuk.

fingers10 · Answer 2 · 2022-11-13T02:34:52.677

I had a similar issue and I added a await Task.Delay(250) in my @onfocusout handler and it worked. You can find the live demo by clicking three vertical dots at top right in ilovedotnet site.

<section id="social">
    <div class="dropdown is-right @(MenuCollapsed ? null : "is-active")" @onclick="ToggleMenu" @onfocusout="FocusOutHandler">
        <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="social-menu">
                Social
            </button>
        </div>
        <div class="dropdown-menu" id="social-menu" role="menu">
            <div class="dropdown-content">
                <a href="https://ilovedotnet.org/" target="_blank" class="dropdown-item">
                    I Love DotNet
                </a>
            </div>
        </div>
    </div>
</section>

@code {
    internal bool MenuCollapsed { get; private set; } = true;

    internal void ToggleMenu()
    {
        MenuCollapsed = !MenuCollapsed;
    }

    internal async Task FocusOutHandler()
    {
        // to avoid race between mouse click of anchor tag Navigation. without this delay Navigation
        // is not getting executed when item is clicked from mouse
        await Task.Delay(250);
        MenuCollapsed = true;
    }
}

Blazor - Prevent sibling event from firing ( onclick > onfocusout )

2 Answers2