MatAutocomplete does not always emit opened event

geanpeixoto commented 5 years ago

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, 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 the overlay is created but the event is never emitted because is no MatOption available.
See MatAutocompleteTrigger:_subscribeToClosingActions, when changes are detected, the panel becomes visible but no event is emitted.

A possible fix is to emit events in MatAutocomplete:_setVisibility, but it’ll introduce a new (and possible unexpected) behavior to the component.

crisbeto commented 5 years ago

If you look in the DOM, the autocomplete is open, but it's not visible because there aren't any options.

steve-todorov commented 5 years ago

I'm hitting the same issue. We are extending the mat-autocomplete to provide some additional functionality on top of it, but the opened and closed emitters are not always emitting values which is breaking our code. This makes the mat-autocomplete component kind of useless in our use case.

I don't see a point of keeping the autocomplete's panel state opened when there aren't any options to display. I assumed that when there are no options display the panel would automatically transition to state closed.

lexeek commented 5 years ago

The fix of this is very desired. I faced with this issue also, not only open event is broken, close event also does not work as expected. There is an example [https://stackblitz.com/edit/angular-qvhrap?file=app/autocomplete-overview-example.html]()

'Open' event emits almost always but if something happened with close event an 'open' event doesn't emit. A 'close' event fires each time after the mouse has been clicked but if do continue writing text the panel would be closed but event would not be fired.

@josephperrott Excuse me, but could someone change priority to higher level ? Cant implement huge part of logic depended on that two events, looking for workaround :(

mohyeid commented 5 years ago

Wow, this seems to be a very high priority list. I am using an observable to trigger the options panel and the open function never gets called.

Hassan-Moin commented 5 years ago

Still waiting for a fix or a workaround.

dalepo commented 5 years ago

Sadly, I have solved this by manually emitting an 'opened event'.

// On your component
@ViewChild(MatAutocomplete) autoComplete: MatAutocomplete;
....
// On your function 
myFn(): void {
  this.autoComplete.opened.emit();
}

Dev25-00 commented 4 years ago

@dalepo Thanks for solution, but it's seem's dont fixe the issue, it's maybe du to ReactiveFormsModule, MatInputModule, BrowserAnimationsModule, and specially the last one, cause animation dont show, but in my verification console.log show the values selected in the array after a filter due to writing content into input !

If any one find a solution to fixe the bug let us know ! Thx

ghost commented 4 months ago

Create hidden element, it work with me <mat-option style="display: none;" [value]="">Hide

angular / components