New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
MatAutocomplete directive with undefined value should be ignored and not throw exception #11096
Comments
I can see your reasoning @gtranter, but I feel that changing the current behavior might lead to more confusion (e.g. making it so it only throws for something like |
I'm not married to changing the existing behavior actually - I am just hoping for a way around it - perhaps in the way of a property for the directive to simply turn off the trigger. For example:
|
I'm not convinced that this won't introduce confusion between the native |
Then don't use that exact name - it was just an example - come up with something more appropriate and less confusing. |
Allows for the autocomplete trigger to be disabled without disabling the input or making it readonly. When disabled, all autocomplete-related accessibility will be removed and the user won't be able to open the panel. This is useful for cases where the input might be optionally become an autocomplete, based on certain conditions, which usually isn't possible because directives can't be applied conditionally. Fixes angular#11096.
Allows for the autocomplete trigger to be disabled without disabling the input or making it readonly. When disabled, all autocomplete-related accessibility will be removed and the user won't be able to open the panel. This is useful for cases where the input might be optionally become an autocomplete, based on certain conditions, which usually isn't possible because directives can't be applied conditionally. Fixes #11096.
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
Feature request
What is the expected behavior?
When the value for a MatInput's [matAutocomplete] option is null/undefined, the MatAutocompleteTrigger should not do anything.
What is the current behavior?
If a MatInput with an undefined [matAutocomplete] option is clicked, an exception is thrown (deliberately) by the MatAutocompleteTrigger.
What are the steps to reproduce?
https://stackblitz.com/edit/angular-mvsaab?embed=1&file=component/my-autocomplete.html
Click on the "No autocomplete" field and view the console.
What is the use-case or motivation for changing an existing behavior?
In order to create a custom component that wraps a MatFormField with MatInput and can optionally be used as a MatAutocomplete, the bound directive value needs to be allowed to be null/undefined. I understand the purpose of the exception and the intent of the current design, but there should be some way to disable the trigger other than not using the directive so that it can be wrapped as described and shown in the stackblitz example.
This ties in to another limitation - using *ngIf on the MatInput inside MatFormField. If that worked (it doesn't), then it would serve as a workaround for this problem as I could easily have separate MatInput templates for with or without a [matAutocomplete] option.
The only way I have found to work around this is to actually *ngIf the entire MatFormField in my component's template. Not only is this far from ideal, but it leads to another problem - when I use ng-content selectors inside the form field (I do this for content inside the element), I cannot use the same selector in both form field definitions (it seems that the first in the template is used which may be in the form field excluded by the *ngIf).
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
latest 5.x
Is there anything else we should know?
If there is a reasonable workaround for any of these problems, that would be fabulously useful.
EDIT: I've managed to work around the selector issue by moving the ng-content into an ng-template and pointing to the template from within the mat-error elements.
The text was updated successfully, but these errors were encountered: