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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response：

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.