Components: Chips: editing existing chip

[PDavid]

Bug, feature request, or proposal: feature

What is the expected behavior?

Users should be able to edit existing chips.
Process could be like this:

• The user double clicks on chip and this should start the edit mode.
• The user should be able to change the chip value and then finalize the change with hitting enter.
  Similarly to this PR in AngularJS Material: https://github.com/angular/material/pull/7210
  

What is the current behavior?

It is not possible to edit existing chips. (Only possible to add a new one and delete the existing one.)

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-chips-edit-existing

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

On faulty user input the user should be able to edit existing chips.

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

• Angular version: 5.2.2,
• Material version: 5.1.0,
• TypeScript version: 2.4.2.

Is there anything else we should know?

[surfer19]

I can handle it but I don't think that chips should be editable.
See the behavior: https://material.io/guidelines/components/chips.html#chips-behavior

[julianobrasil]

Double clicking action is not a good choice in small devices, where it fires a zoom on the screen.

I partially agree with @surfer19. But the specs also allow for opening a card with detailed view. In this detailed view the developer is kind of free to do whatever he wants to, including providing a way to change the chip name.

[surfer19]

I agree but as you said on mobiles it will be annoying. On native apps there is possibility for "long tap" but I think its impossible in browsers.

[julianobrasil]

You can with hammer.js. It allows for long taps (formally known as press) on web apps.

[PDavid]

First of all, thanks for looking into this feature request! :)

I saw that this feature was already part of AngularJS Material and I just expected this also in material2.

I can see that the linked specification (material design guidelines) does not contain anything about editing existing chips but I have this hard requirement for my application and I still think that others can also benefit from it.

Opening a detail view could be an option but it would be way more easier for the user to edit the text inline. Also for my use-case each chips is just a simple text. So for example opening a modal for just one text input seems to be unnecessary for me.

What do you think?

[Misiu]

@PDavid how do You store those chips? Are those some kind of tags stored in DB as pair of id and text?
In my case I'm reusing existing tags, so if I would allow renaming tags that would affect other items (for example user could potentially rename Orange to Apple and on each page instead of Orange You would get Apple, hope You get my point)
I see one benefit or this: correcting incorrect spelling, but for my case removing incorrect tags and adding new seems better solution.

Eventually add page with all tags and allow editing them there. Is that an option?

[PDavid]

@Misiu I store the chips as an array of strings. This component for my use-case allows to add multiple texts and remove any of them. For example a list of URL-s.
https://stackblitz.com/edit/angular-material2-chips-edit-existing-dsc4ue

In my case I don't use the component as applying tags, so this would not be problem for me. Though I understand your point about affecting other related pages.

Yes, as you mentioned this would be good for correcting incorrect spellings and typos.
Removing and adding tags works but if the order of the items is important, then the user also have to change the order of the items.
So instead of renaming an existing item, the user have to:

• remove the existing
• add a new one
• change the ordering so the new item is in the correct place

[surfer19]

@PDavid I agree with you that inline edit of text inside chip can be lot of easier for your case. But I think component chips should be as simple as possible. Purpose of component is to show information what user selected - at example. For me changing of text inline is less UX than remove and add new also its more simple for component API.
For very specific solutions I recommend you to do custom component or override existed component(I see some similarity with input component).

[PDavid]

@surfer19 I see your points and can understand them.
It seems actually that my use-case is very different from the intended use of this component.
In the light of this probably I have to implement some solution myself or use another component.

[Misiu]

@PDavid I'm not sure if reordering chips is possible (currently implemented).
If yes, then Your user could remove invalid chip, add new and reorder it.

[PDavid]

@Misiu the component does not supports reordering chips out of the box.
I solved it with ng2-dragula based on this stackoverflow solution:
https://stackoverflow.com/questions/42309140/drag-and-drop-angular-material2-chips-with-ng2-dragula-library

If yes, then Your user could remove invalid chip, add new and reorder it.

Yes, the user can do this. My point was just that this requires more interaction from the user and thus less user-friendly than in-place editing. But of course I see your points here.

[PDavid]

Thanks for the discussion and your input.
In the end we solved our requirement with an another component.
So I'll close this issue.

[varunrramani]

@PDavid I have a similar requirement. It would be of great help if you could tell what component solved your problem.

[PDavid]

@varunrramani Actually for now we just implemented a custom Angular component with using an HTML textarea in which each row is a separate value. This way the user is able to add, remove values and even change the ordering in a very simple way.
Or maybe you can check ngx-chips which we used before the current solution.
Hope this helps. :)

[Misiu]

@PDavid I se that ngx-chips added option to edit chips (https://stackblitz.com/edit/angular-yhfiqn?file=app%2Fapp.component.html)
it also provides ability to reorder chips, so it should ideally suit Your needs.

Why did You build custom component?

[varunrramani]

Can we expect the chips to be editable in a future release since its also there in the design specs?

[m-ghaoui]

I would like to see this feature as well.

[angular-automatic-lock-bot[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._}