MatAutocomplete panel does not close when the parent input changes focus programmatically.

[andybougard]

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

When adding host listener for keyboard navigation to other elements, the auto complete panel does not close.

Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-14-material-fbxecy?file=src%2Fauto-complete%2Fauto-complete.component.html
Steps to reproduce:

1. Click in the "Number" input.
2. Press Ctrl+DownArrow.
3. Observe that focus moves to the text area input without closing the panel.

Expected Behavior

After the focus of the parent input moves to another element (either by click() or blur()), the panel should be closed.

Actual Behavior

After moving focus from the parent input by using element.focus() the auto complete panel keeps visible until a click action takes place.

Environment

• Angular: 14
• CDK/Material:
• Browser(s): Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[wagnermaciel]

Hi, it looks like this might have been resolved in later versions. Also, based on the visuals, it seems like there may be something broken in the example stackblitz you shared. I tried to reproduce the issue in v17 but failed (although I am trying on a mac)

Are you able to reproduce this issue on this more recent stackblitz?

https://stackblitz.com/edit/11jmm4?file=src%2Fexample%2Fautocomplete-auto-active-first-option-example.html

[andybougard]

I was able to reproduce the issue in your example, please add the following code at the end of your ts file and click Ctrl+DwnArrow when you are focused in the input with the autocomplete...

private blurToTextArea() {
let el = document.getElementById('textArea1');
el?.focus();
}

@HostListener('window:keydown.control.ArrowDown', ['$event'])
navigateDown(event: KeyboardEvent) {
event.preventDefault();
this.blurToTextArea();
}