I'm creating my own autoplete 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=".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>

I'm creating my own autoplete 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./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.

• javascript
• html
• jquery
• blazor
• blazor-webassembly

Share Improve this question Follow edited Nov 22, 2021 at 18:59 Reptar asked Nov 22, 2021 at 17:46 ReptarReptar 37211 gold badge77 silver badges2020 bronze badges 5

• 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 Commented Nov 22, 2021 at 18:16
• No it does not, it's only a void that sets the bool "showDropdown" to false. – Reptar Commented Nov 22, 2021 at 18:34
• Update your question with code or create a fiddle so we can test solutions. – Grizzlly Commented Nov 22, 2021 at 18:41
• 1 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 Commented Nov 22, 2021 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 Commented Nov 22, 2021 at 19:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

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/" 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;
    }
}