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

MatChipList's input is not styledi like MatInput while in disabled state #11089

Closed
Antoniossss opened this issue May 1, 2018 · 5 comments · Fixed by #12659
Closed

MatChipList's input is not styledi like MatInput while in disabled state #11089

Antoniossss opened this issue May 1, 2018 · 5 comments · Fixed by #12659
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Antoniossss
Copy link

Bug, feature request, or proposal:

BUG/PROPOSAL

What is the expected behavior?

I would like to have ability to disable chip list like I do with any other input.

What is the current behavior?

Chip list is not styled when disabled. Styling is fine when input is the first element in mat-form-field but then chips are displayed incorectly (input is above chips)

What are the steps to reproduce?

https://stackblitz.com/edit/angular-6v3y9r
@amandabot
Copy link

The same issue applies to inputs marked readonly; the underline animation is triggered and the colors of the underline and label take on the primary theme color.

https://stackblitz.com/edit/angular-6v3y9r-rgggep

@tinayuangao
Copy link
Contributor

@Antoniossss You should put disabled on mat-chip-list and do not use matInput on matChipInputFor because matInput does nothing here.

@tinayuangao
Copy link
Contributor

@Antoniossss I found your updated stackblitz disabled state for chip list looks correct. Could you please explain where "it still not styled like regular input"? Thanks

@Antoniossss
Copy link
Author

https://stackblitz.com/edit/angular-6v3y9r-pmgeet?file=app/chips-input-example.html

Chip list input is still focusable even on disabled state.

@crisbeto crisbeto assigned crisbeto and unassigned tinayuangao Aug 13, 2018
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Aug 13, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 13, 2018
@crisbeto
fix(chips): incorrectly handling disabled state
b770675 
* Fixes the form field displaying as disabled, but the user still being able to interact with the chip list.
* Fixes the chip list still being focusable while it is disabled.
* Fixes the individual chips not being disabled when the list is disabled.
* Fixes the chip input not being disabled when the list is disabled.

Fixes angular#11089.
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 13, 2018
@crisbeto
fix(chips): incorrectly handling disabled state
bdcd6f3 
* Fixes the form field displaying as disabled, but the user still being able to interact with the chip list.
* Fixes the chip list still being focusable while it is disabled.
* Fixes the individual chips not being disabled when the list is disabled.
* Fixes the chip input not being disabled when the list is disabled.

Fixes angular#11089.
@crisbeto crisbeto mentioned this issue Aug 13, 2018
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 14, 2018
@crisbeto
fix(chips): incorrectly handling disabled state
b103d1e 
* Fixes the form field displaying as disabled, but the user still being able to interact with the chip list.
* Fixes the chip list still being focusable while it is disabled.
* Fixes the individual chips not being disabled when the list is disabled.
* Fixes the chip input not being disabled when the list is disabled.

Fixes angular#11089.
jelbourn pushed a commit that referenced this issue Aug 21, 2018
@crisbeto @jelbourn
fix(chips): incorrectly handling disabled state (#12659)
65ad6ab 
* Fixes the form field displaying as disabled, but the user still being able to interact with the chip list.
* Fixes the chip list still being focusable while it is disabled.
* Fixes the individual chips not being disabled when the list is disabled.
* Fixes the chip input not being disabled when the list is disabled.

Fixes #11089.
jelbourn pushed a commit that referenced this issue Aug 29, 2018
@crisbeto @jelbourn
fix(chips): incorrectly handling disabled state (#12659)
15e7f74 
* Fixes the form field displaying as disabled, but the user still being able to interact with the chip list.
* Fixes the chip list still being focusable while it is disabled.
* Fixes the individual chips not being disabled when the list is disabled.
* Fixes the chip input not being disabled when the list is disabled.

Fixes #11089.
@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 9, 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(chips): incorrectly handling disabled state crisbeto/material2
4 participants
@crisbeto @Antoniossss @amandabot @tinayuangao