<material-auto-suggest-input> does not propagate FocusEvent on Blur

[edyarve]

I am trying to use blur event on material-auto-suggest-input and noticed that blur event always returns null instead of FocusEvent.

Looking at the source code of material-auto-suggest-input the focus event is not being propagated.

void handleBlur(html.FocusEvent event) {
   _isFocused = false;
   if ((!showPopup || !hasOptions) && _onBlur != null) {
     _onBlur.add(null);
   }
}

Can we propogate the FocusEvent as shown below? _onBlur.add(event);

[TedSander]

So it would be simple but there is one problem and that is here: https://github.com/dart-lang/angular_components/blob/860d16150e134ac9cb4c7833d4e15087c96da8c6/lib/material_input/material_auto_suggest_input.dart#L511

As you can see the blur is programatically fired. Before I make the change would it work for you that the event can sometimes be null?

[edyarve]

So, the event will be still null in the case when the value is selected from the dropdown. On the other case, if a user changes the focus to another element, the event will be set to the FocusEvent. That is the behavior I would expect.

[edyarve]

I did more debugging and found out that even in the cases when the user just simply moves the focus on the different element the programmatically fired blur event is called. So, even that case the event will be null. This makes it less usable for me. I still believe that the change I proposed is valuable as we should propagate the event if we have it.

What I need is somehow to get hold of the element that will gain focus after the material-auto-suggest-input. It is accessible from FocusEvent.relatedTarget while Blur happens. I am not sure at this point how to achieve that. Any idea? Any changes that can be done to the material-auto-suggest-input that will allow us to get FocusEvent. The browser should certainly have the event when the user changes the focus, but somehow we are losing it - probably while processing the popup menu. Any thoughts?

[cissyshi]

So relatedTarget on focus and blur events are not reliable unfortunately. Chrome is the only browser that returns value consistently. Firefox don't return relatedTarget at all. IE does not reliably return the field either.

Can I get a better understanding of what you are trying to do? Maybe there are better options than using relatedTarget from blur events.

[edyarve]

I did change my design not to rely on blur events in this case, but I am still relying on them in other situations with text area control.

Do you have some reference to an article that the blur events are not reliable, so I can read more about it? Does it apply to all input controls or only to some?

[cissyshi]

Looks like the issue in Firefox is actually fixed based on this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=962251. But IE <= 11 still doesn't fully support relatedTarget. I can't find an official bug though.

I think the most reliable way for you the get the element in focus is probably to look at the activeElement when blur is triggered.