Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Can not disable custom MatFormFieldControl with FormControl with mat-autocomplete #8735

Closed
mattem opened this issue Nov 30, 2017 · 7 comments · Fixed by #8746
Closed

Can not disable custom MatFormFieldControl with FormControl with mat-autocomplete #8735

mattem opened this issue Nov 30, 2017 · 7 comments · Fixed by #8746
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@mattem
Copy link

mattem commented Nov 30, 2017

Bug, feature request, or proposal:

  • Potential bug

What is the expected behavior?

A component implementing MatFormFieldControl with a mat-autocomplete can be disabled correctly via a FormControl.

What is the current behavior?

It is not possible to have a custom MatFormFieldControl implementation with a mat-autocomplete and have the input disabled via a FormControl. Notice in the StackBlitz application, it is possible to open the autocomplete overlay of the field and select an option even when the field is set to disabled.

If the FormControl is removed from the input element in custom-input and a binding to [disabled] is used, the behaviour works as expected. The reason I am using a FormControl here is to automatically apply validators to the input, so they are not needed to be added manually by the consumer of the form field everywhere it is used.

It does however work correctly when adding matInput to the input element inside custom-input. Is this the intended behaviour? The CDK Docs here do not include it.

What are the steps to reproduce?

https://stackblitz.com/edit/custom-mat-form-field-with-auto-complete

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

To be able to disable the input when an autocomplete is attached, or be clearer in the docs when matInput is needed still.

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

Latest from NPM (see StackBlitz)
@crisbeto
Copy link
Member

Your example breaks because you don't disable underlying input element when the form field becomes disabled, which means that it's still focusable and the user can still type in it.

@mattem
Copy link
Author

mattem commented Nov 30, 2017

@crisbeto I'm using a FormControl to disable the input, as using both a FormControl and binding with [disabled] says it's invalid. Removing the reference to the auto complete [matAutocomplete]="auto" on the underlying input also makes this example work correctly. Or are you saying I have to manually set and update the disabled attribute on the input element?

@crisbeto
Copy link
Member

Yes, otherwise users will still be able to focus and type into the input.

@mattem
Copy link
Author

mattem commented Nov 30, 2017

How does this work then when I remove the reference to matAutocomplete from the input element? The element should still be getting disabled by it's attached FormControl?

@crisbeto
Copy link
Member

Sorry, now I see what you mean. I'll take a look at it.

@crisbeto crisbeto self-assigned this Nov 30, 2017
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Nov 30, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 30, 2017
@crisbeto
fix(autocomplete): not implementing setDisabledState from ControlValu…
71a471c 
…eAccessor

Fixes plain inputs (without a `matInput`) that has a `formControl` and an autocomplete attached not being disabled via `FormControl.disable`. The issue was due to the `MatAutocompleteTrigger` not implementing the `setDisableState`. The current implementation is in line with the approach in the `DefaultValueAccessor`.

Fixes angular#8735.
@crisbeto crisbeto mentioned this issue Nov 30, 2017
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 2, 2017
@crisbeto
fix(autocomplete): not implementing setDisabledState from ControlValu…
ebcea44 
…eAccessor

Fixes plain inputs (without a `matInput`) that has a `formControl` and an autocomplete attached not being disabled via `FormControl.disable`. The issue was due to the `MatAutocompleteTrigger` not implementing the `setDisableState`. The current implementation is in line with the approach in the `DefaultValueAccessor`.

Fixes angular#8735.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 6, 2017
@crisbeto
fix(autocomplete): not implementing setDisabledState from ControlValu…
93bda3c 
…eAccessor

Fixes plain inputs (without a `matInput`) that has a `formControl` and an autocomplete attached not being disabled via `FormControl.disable`. The issue was due to the `MatAutocompleteTrigger` not implementing the `setDisableState`. The current implementation is in line with the approach in the `DefaultValueAccessor`.

Fixes angular#8735.
@Chaslee4
Copy link

Chaslee4 commented Dec 8, 2017

Meet the same issue. Can't disable the input in mat-autocomplete component when using FormControl...Is this issue fixed?

andrewseguin pushed a commit that referenced this issue Dec 13, 2017
@crisbeto @andrewseguin
fix(autocomplete): not implementing setDisabledState from ControlValu…
92bc503 
…eAccessor (#8746)

Fixes plain inputs (without a `matInput`) that has a `formControl` and an autocomplete attached not being disabled via `FormControl.disable`. The issue was due to the `MatAutocompleteTrigger` not implementing the `setDisableState`. The current implementation is in line with the approach in the `DefaultValueAccessor`.

Fixes #8735.
andrewseguin pushed a commit to andrewseguin/components that referenced this issue Dec 19, 2017
@crisbeto @andrewseguin
fix(autocomplete): not implementing setDisabledState from ControlValu…
ae639da 
…eAccessor (angular#8746)

Fixes plain inputs (without a `matInput`) that has a `formControl` and an autocomplete attached not being disabled via `FormControl.disable`. The issue was due to the `MatAutocompleteTrigger` not implementing the `setDisableState`. The current implementation is in line with the approach in the `DefaultValueAccessor`.

Fixes angular#8735.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(autocomplete): not implementing setDisabledState from ControlValueAccessor crisbeto/material2
3 participants
@mattem @crisbeto @Chaslee4