No implementation of md-not-found for Autocomplete in Angular2+

[CarolLevesque]

Bug, feature request, or proposal:

Would like to have mat-not-found or something similar in Angular 2+

What is the expected behavior?

Angular 1.* had md-not-found, which allowed the user to realize there was no data they could choose from.

What is the current behavior?

Nothing appears if nothing comes back from database or if they typed it incorrectly.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Users don't know if they are doing something wrong or if there is no data in the drop down.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 2+

Is there anything else we should know?

If there is a workaround, I would love to hear it. I could't figure out a way around it.

[julianobrasil]

@CarolLevesque, it depends on what you want a see, but I think you can build up a workaround with some coding (not too much): https://stackblitz.com/edit/angular-rbirqg?file=app/autocomplete-overview-example.html

On stackblitz, type 'abc' at the input. It's a simple example of what you can do.

[CarolLevesque]

This is close to what I was looking for. The only issue is that I don't want them to be able to select it as an option. But I'm sure I could work with this.

[julianobrasil]

Sure thing... you can apply pointer-events: none to mat-option to avoid mouse interactions and think of a way to prevent the arrow keys selection.

[CarolLevesque]

Great idea. Thanks

[MumiaIrrequieta]

Can you please fix the stackblitz example? it's not working.
Nonetheless, the solution is far from optimal (with the option being selectable and all), so please reopen this issue because it's a regression from a previous feature.

[julianobrasil]

@MumiaIrrequieta, I've deleted it during a stackblitz clean up. But I built it again: https://stackblitz.com/edit/angular-material-autocomplete-no-data

I agree that it's not ideal, but unfortunately, I think there's not enough outputs to manage it appropriately. But take a look at the example: the only not so good thing is that you are still able to activate it through the keyboard (so I clear up the trigger when this happens).

It would be perfect if we could cancel the keyboard navigation throughout the options before the item is activated.

[julianobrasil]

Using the browser api directly, I was able to intercept the keyboard events and avoid the selection using keyboard keys. I think it's a pretty acceptable workaround: https://stackblitz.com/edit/angular-material-autocomplete-no-data

[MumiaIrrequieta]

Thank you very much for your quick and working answer, it did the trick! but as you said, it's a "workaround".
Valeu!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}