I'm implementing an autocomplete/combobox in dart. I'm using two elements for this, a <input type="text">
and a <ul>
for the suggestions. I want to hide via css style display: none
whenever the user leaves the input box. This works when using onBlur
on the input element.
If the user tries to click an item in the <ul>
, the input looses focus and the <ul>
is hidden before the click event on the <li>
is run.
_listElement = new UListElement();
_textElement = new TextInputElement()
..onBlur((e) => setDisplayToNone(_listElement)); // hide element
I noticed that a jQueryUI implementation does not have this issue and I can not figure out how they detect when to hide the suggestion box. see https://jqueryui.com/autocomplete/
What alternate way can i use to hide the <ul>
without hiding it on _textElement.onBlur
?
If it helps, the two elements are always wrapped by a <div>
. I'm looking for a dart-only solution, although vanilla-js answers that I can rebuild in dart are also appreciated.
Please look at events sequence:
So you might setup a flag variable, turn it up on li.mousedown
, check it on input.blur
and decide if you need to hide the list, and then turn it down on li.click