Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

chips: allow disable text input #5796

Closed
ilovett opened this issue Nov 17, 2015 · 12 comments
Closed

chips: allow disable text input #5796

ilovett opened this issue Nov 17, 2015 · 12 comments
Labels
P4: minor Minor issues. May not be fixed without community contributions. pr: merge ready This PR is ready for a caretaker to review resolution: fixed
Milestone

Comments

@ilovett
Copy link
Contributor

ilovett commented Nov 17, 2015

Add option to only disabled the keyboard / input aspect of md-chips while allowing mouse clicks on the delete button. This would essentially become a list of filters which have been selected elsewhere, perhaps in conjunction with a very large multi select. Clicking on X would de-select the filter and remove it from the model list.

@devversion
Copy link
Member

Sounds great.
How you imagine this feature? an extra attribute for the chips directive?
Or you have any other thinks?

@ilovett
Copy link
Contributor Author

ilovett commented Nov 17, 2015

Immediately I'd think to turn readonly into accepting mixed boolean/array of strings of which components to enable/disable.

But really I think that the md-chips directive is too tightly coupled to having an input and might want to have a md-chips-input wrapper. The spec's chips doesn't neccessarily have inputs: https://www.google.com/design/spec/components/chips.html#

@devversion
Copy link
Member

I think readonly with an expression isn't a good idea, we should provide another attribute like ng-deleteonly (for example). What do you think?

About tightly coupled, we can easily change the template of the chips, so the attribute needs to be static and not a binding.

devversion added a commit to devversion/material that referenced this issue Nov 18, 2015
Remove the box-shadow if `removeonly`
Only allow to remove chips per mouse click
Simply add the `removeonly` attribute
I created a little demo, which you see and build in the docs

Closes angular#5796
devversion added a commit to devversion/material that referenced this issue Nov 18, 2015
Remove the box-shadow if `removeonly`
Only allow to remove chips per mouse click
Simply add the `removeonly` attribute
I created a little demo, which you see and build in the docs

Closes angular#5796
@marcysutton
Copy link
Contributor

Hold on–how would you delete a chip from the keyboard? It still needs to be operable from an accessibility perspective.

@ilovett ilovett changed the title allow disable keyboard only md-chips allow disable text input md-chips Nov 18, 2015
@ilovett
Copy link
Contributor Author

ilovett commented Nov 18, 2015

You're right, I should have worded this better. The idea is not to disable keyboard altogether, just remove the text input field. Users can still focus via keyboard, and backspace would behave the same. But moving focus forward would not place focus in an input field where the user can type. Instead it would move on to the next focusable item.

@devversion
Copy link
Member

@marcysutton Already done in my Pull Request, check it out ;) #5799

@ilovett
Copy link
Contributor Author

ilovett commented Nov 18, 2015

wow that was fast @devversion !

@devversion
Copy link
Member

👍
You can also check and build the PR 😄

devversion added a commit to devversion/material that referenced this issue Nov 24, 2015

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
Remove the box-shadow if `removeonly`
Only allow to remove chips per mouse click
Simply add the `removeonly` attribute
I created a little demo, which you see and build in the docs

Closes angular#5796

test(chips): add test for removeonly attribute and add expression in ngdocs
@ranc
Copy link

ranc commented Jan 5, 2016

+1

@EladBezalel
Copy link
Member

@topherfangio moved this to your plate cause you're in charge on the ongoing PR

devversion added a commit to devversion/material that referenced this issue Jan 9, 2016

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
- By default - chips are writable **and** deletable *(current functionality)*
- `readonly="true"`- chips are readonly **and** deletable *(current functionality)*
- `readonly="true" md-removable="true"` - chips are readonly, **and** deletable *(new syntax, but same functionality as above)*
- `readonly="true" md-removable="false"` - chips are readonly, **not** deletable*(new)*
- `md-removable="false"`- chips are writable, **not** deletable*(new)*

- *`KUDOS Description`: by Topher Fangio*

Closes angular#5796 angular#3820
devversion added a commit to devversion/material that referenced this issue Jan 9, 2016
- By default - chips are writable **and** deletable *(current functionality)*
- `readonly="true"`- chips are readonly **and** deletable *(current functionality)*
- `readonly="true" md-removable="true"` - chips are readonly, **and** deletable *(new syntax, but same functionality as above)*
- `readonly="true" md-removable="false"` - chips are readonly, **not** deletable*(new)*
- `md-removable="false"`- chips are writable, **not** deletable*(new)*

- *`KUDOS Description`: by Topher Fangio*

Closes angular#5796 angular#3820
@ThomasBurleson ThomasBurleson added needs: review This PR is waiting on review from the team pr: merge ready This PR is ready for a caretaker to review in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs P4: minor Minor issues. May not be fixed without community contributions. and removed in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs labels Jan 15, 2016
@ThomasBurleson ThomasBurleson modified the milestone: Backlog Jan 15, 2016
devversion added a commit to devversion/material that referenced this issue Feb 4, 2016
- By default - chips are writable **and** deletable *(current functionality)*
- `readonly="true"`- chips are readonly **and** deletable *(current functionality)*
- `readonly="true" md-removable="true"` - chips are readonly, **and** deletable *(new syntax, but same functionality as above)*
- `readonly="true" md-removable="false"` - chips are readonly, **not** deletable*(new)*
- `md-removable="false"`- chips are writable, **not** deletable*(new)*

- *`KUDOS Description`: by Topher Fangio*

Closes angular#5796 angular#3820
devversion added a commit to devversion/material that referenced this issue Mar 1, 2016
- By default - chips are writable **and** deletable *(current functionality)*
- `readonly="true"`- chips are readonly **and** deletable *(current functionality)*
- `readonly="true" md-removable="true"` - chips are readonly, **and** deletable *(new syntax, but same functionality as above)*
- `readonly="true" md-removable="false"` - chips are readonly, **not** deletable*(new)*
- `md-removable="false"`- chips are writable, **not** deletable*(new)*

- *`KUDOS Description`: by Topher Fangio*

Closes angular#5796 angular#3820
devversion added a commit to devversion/material that referenced this issue Mar 2, 2016
- By default - chips are writable **and** deletable *(current functionality)*
- `readonly="true"`- chips are readonly **and** deletable *(current functionality)*
- `readonly="true" md-removable="true"` - chips are readonly, **and** deletable *(new syntax, but same functionality as above)*
- `readonly="true" md-removable="false"` - chips are readonly, **not** deletable*(new)*
- `md-removable="false"`- chips are writable, **not** deletable*(new)*

- *`KUDOS Description`: by Topher Fangio*

Closes angular#5796 angular#3820
devversion added a commit to devversion/material that referenced this issue Mar 21, 2016
- By default - chips are writable **and** deletable *(current functionality)*
- `readonly="true"`- chips are readonly **and** deletable *(current functionality)*
- `readonly="true" md-removable="true"` - chips are readonly, **and** deletable *(new syntax, but same functionality as above)*
- `readonly="true" md-removable="false"` - chips are readonly, **not** deletable*(new)*
- `md-removable="false"`- chips are writable, **not** deletable*(new)*

- *`KUDOS Description`: by Topher Fangio*

Closes angular#5796 angular#3820
devversion added a commit to devversion/material that referenced this issue Apr 19, 2016
- By default - chips are writable **and** deletable
- `readonly="true"`- chips are readonly and not deletable
- `readonly="true" md-removable="true"` - chips are readonly, and deletable
- `readonly="true" md-removable="false"` - chips are readonly, not deletable
- `md-removable="false"`- chips are writable, not deletable

Closes angular#5796. Fixes angular#3820.
Bzisch pushed a commit to Bzisch/material that referenced this issue Apr 19, 2016
- By default - chips are writable **and** deletable *(current functionality)*
- `readonly="true"`- chips are readonly **and** deletable *(current functionality)*
- `readonly="true" md-removable="true"` - chips are readonly, **and** deletable *(new syntax, but same functionality as above)*
- `readonly="true" md-removable="false"` - chips are readonly, **not** deletable*(new)*
- `md-removable="false"`- chips are writable, **not** deletable*(new)*

- *`KUDOS Description`: by Topher Fangio*

Closes angular#5796 angular#3820
devversion added a commit to devversion/material that referenced this issue Apr 19, 2016
- By default - chips are writable **and** deletable
- `readonly="true"`- chips are readonly and not deletable
- `readonly="true" md-removable="true"` - chips are readonly, and deletable
- `readonly="true" md-removable="false"` - chips are readonly, not deletable
- `md-removable="false"`- chips are writable, not deletable

Closes angular#5796. Fixes angular#3820.
devversion added a commit to devversion/material that referenced this issue Apr 19, 2016
- By default - chips are writable **and** deletable
- `readonly="true"`- chips are readonly and not deletable
- `readonly="true" md-removable="true"` - chips are readonly, and deletable
- `readonly="true" md-removable="false"` - chips are readonly, not deletable
- `md-removable="false"`- chips are writable, not deletable

Closes angular#5796. Fixes angular#3820.
devversion added a commit to devversion/material that referenced this issue Apr 19, 2016
- By default - chips are writable **and** deletable
- `readonly="true"`- chips are readonly and not deletable
- `readonly="true" md-removable="true"` - chips are readonly, and deletable
- `readonly="true" md-removable="false"` - chips are readonly, not deletable
- `md-removable="false"`- chips are writable, not deletable

Closes angular#5796. Fixes angular#3820.
@ThomasBurleson ThomasBurleson modified the milestones: Backlog, Deprecated Apr 20, 2016
devversion added a commit to devversion/material that referenced this issue Jun 3, 2016
- By default - chips are writable **and** deletable
- `readonly="true"`- chips are readonly and not deletable
- `readonly="true" md-removable="true"` - chips are readonly, and deletable
- `readonly="true" md-removable="false"` - chips are readonly, not deletable
- `md-removable="false"`- chips are writable, not deletable

Closes angular#5796. Fixes angular#3820.
ThomasBurleson pushed a commit that referenced this issue Jun 23, 2016
- By default - chips are writable **and** deletable
- `readonly="true"`- chips are readonly and not deletable
- `readonly="true" md-removable="true"` - chips are readonly, and deletable
- `readonly="true" md-removable="false"` - chips are readonly, not deletable
- `md-removable="false"`- chips are writable, not deletable

Closes #5796. Fixes #3820.

Closes #5799
toshiakiezaki pushed a commit to toshiakiezaki/angular-material that referenced this issue Jul 1, 2016
- By default - chips are writable **and** deletable
- `readonly="true"`- chips are readonly and not deletable
- `readonly="true" md-removable="true"` - chips are readonly, and deletable
- `readonly="true" md-removable="false"` - chips are readonly, not deletable
- `md-removable="false"`- chips are writable, not deletable

Closes angular#5796. Fixes angular#3820.

Closes angular#5799
@1993senthil
Copy link

can any one tel me how to changed the mat-chip input color when it is disabled mode... i want to change border-bottom : 1px dashed #ddd..Now it will show the mat-form-field style

@Splaktar Splaktar modified the milestones: Deprecated, 1.1.0 Jun 17, 2018
@Splaktar Splaktar added resolution: fixed and removed needs: review This PR is waiting on review from the team labels Jun 17, 2018
@Splaktar Splaktar changed the title allow disable text input md-chips chips: allow disable text input Jun 17, 2018
@Splaktar
Copy link
Contributor

@1993senthil Please submit Angular Material questions here and issues here. This repo is for AngularJS Material.

@angular angular locked as resolved and limited conversation to collaborators Jun 17, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P4: minor Minor issues. May not be fixed without community contributions. pr: merge ready This PR is ready for a caretaker to review resolution: fixed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants