bug(autocomplete): calling input.blur from autocomplete option selected does not pass option

[matthewjheaney]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have some code like this:

<input
#companyInput
matInput
...
[matAutocomplete]="companyAutocomplete"
(keydown.enter)="companyInput.blur()"
(blur)="setCompany($event)">
<mat-autocomplete
#companyAutocomplete="matAutocomplete"
(optionSelected)="companyInput.blur()">
...

The goal is that if the user types a value into the input and presses the Enter key, or selects a menu option from the autocomplete option (so clicks the mouse), then the blur handler for the input will get invoked, and the control associated with the input element will have the new value.

However, if you select an option from the autocomplete menu, it does not pass the option to the control, and the control's value is empty.

We can work around this by interrogating the FocusEvent:

setCompany(event: FocusEvent) {
this.adjustControlValue(event);
...
}

private adjustControlValue(event: FocusEvent) {
const target = event.relatedTarget; // mat-option chosen via mouse clikc
... // find list item associated with text content of the option
// set control value manually
}

Note that I work for Google (matthewjheaney@google.com). I can point you to the actual code if that's helpful.

I followed the work-around suggested here:

https://stackoverflow.com/questions/52936740/in-angular-onselectionchange-is-not-getting-invoked-for-angular-mat-option?rq=1

Reproduction

Steps to reproduce:

1. attach a blur handler to input component
2. call the blur function of the API from the mat-input from the autocomplete

Expected Behavior

That it update the control value with the menu option selected.

Actual Behavior

The control value is empty.

Environment

sync from github done on 2021-10-18

[Emprint]

This seems to be a new issue since the refactoring of Material components to MDC.
In the previous version of my application running Angular 13, the FocusEvent triggered on <input matInput (blur)="autoCompleteBlur($event)"> contained a relatedTarget property with the matOption that was clicked.
I have now upgraded to Angular 16 and event.relatedTarget is null.

For now, I have applied a workaround to ignore blur event when relatedTarget is null, it does the job for my implementation.

autoCompleteBlur(event: FocusEvent) {
  if (event.relatedTarget === null) {
    return;
  }
  ...
}