angular / angular/components

MatAutocomplete does not always emit opened event

Open
#13,650 9 comments 16 reactions 0 assignees View on GitHub
area: material/autocomplete P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
The `opened` event should be sent when the panel is open.

#### What is the current behavior?
When an autocomplete panel is initialized with no options, but they are added later, the `opened` event is never sent.

#### What are the steps to reproduce?
Open [https://stackblitz.com/edit/bug-autocomplete-opened](https://stackblitz.com/edit/bug-autocomplete-opened), then type something to open the autocomplete panel.

#### What is the use-case or motivation for changing an existing behavior?
The event is used to obtain a reference to the autocomplete panel’s HTML element, as soon as it is open.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Material 6.4.7
- Angular 6.1.0

#### Is there anything else we should know?
- See [MatAutcompleteTrigger:open](https://github.com/angular/material2/blob/2e4a51180b0074d59c1584c82fb8959f52660124/src/lib/autocomplete/autocomplete-trigger.ts#L609) the overlay is created but the event is never emitted because is no `MatOption` available.

- See [MatAutocompleteTrigger:_subscribeToClosingActions](https://github.com/angular/material2/blob/2e4a51180b0074d59c1584c82fb8959f52660124/src/lib/autocomplete/autocomplete-trigger.ts#L495), when changes are detected, the panel becomes visible but no event is emitted.

A possible fix is to emit events in [MatAutocomplete:_setVisibility](https://github.com/angular/material2/blob/2e4a51180b0074d59c1584c82fb8959f52660124/src/lib/autocomplete/autocomplete.ts#L196), but it’ll introduce a new (and possible unexpected) behavior to the component.

Contributor guide

Open the contributing guide

Research direction

Start with MatAutocompleteTrigger:open and _subscribeToClosingActions in src/lib/autocomplete/autocomplete-trigger.ts, then inspect MatAutocomplete:_setVisibility in src/lib/autocomplete/autocomplete.ts. Run the linked StackBlitz reproduction and verify that typing after options are added emits opened when the panel becomes visible, without introducing unexpected emissions.

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
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.