Detect focus loss for input element, not onBlur

Issue

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 onBluron 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.

Solution

Please look at events sequence:

  1. input.focus
  2. li.mousedown
  3. input.blur
  4. li.mouseup
  5. li.click

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

Answered By – Kosh

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *