MatAutocomplete panel does not close when the parent input changes focus programmatically.
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
Contributor guide
Research direction
Open the linked StackBlitz reproduction and inspect src/auto-complete/auto-complete.component.html, then trace MatAutocomplete focus handling for programmatic focus changes. Reproduce the Ctrl+DownArrow flow and verify that moving focus with element.focus(), click(), or blur() closes the panel as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100