Issue
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.
Solution
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.
Answered By - Grizzlly
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.