Chips: Removed in V18

[PierreB40]

As I said in this issue: https://github.com/primefaces/primeng/issues/16091 The deletion of the Chips component in V18 seems to me to be a mistake. Autocomplete and chips don't have the same parameters, and the same uses. The proposed alternative is not flexible enough: if chips disappears, autcomplete must be able to cover 100% of the possibilities offered by Chips.

[vetemi]

I second this! Not only from a technical point of view but also the way this happened. You simply don't remove functionality from your library without deprecating it first and give time to adapt...

[nico-belonio]

Is that a mistake? What alternatives are there?

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[github-actions[bot]]

Thanks a lot for this issue! PrimeNG team's roadmap is busy, but community feedback is crucial in prioritization. The more upvotes help ensure this fix can be addressed quickly or the related PR can be merged soon.

[Yuri-Lima]

I second this! Not only from a technical point of view but also the way this happened. You simply don't remove functionality from your library without deprecating it first and give time to adapt...

Exactly, with all due respect, but without deprecation is something that makes the library not reliable to use. It doesnt make any sense to remove something out of the blue, without having a smooth process code migration.

Please, guys do at least a deprecation.

[nchaigne]

Same. I'm using Chips, tried to upgrade from primeng 17 but can't since the proposed alternative "autocomplete" does not offer equivalent features.

[Henoch0]

Same here. I recently started a new project and chose PrimeNG, unaware that it lacks an equivalent feature for Chips, which is quite surprising and disappointing.

[m3allimm4a4]

Technically you can use the autocomplete component using the multiple plus the without tipeahead option. But I agree, it should have at least been depricated or mentioned in the docs or something https://primeng.org/autocomplete#multiple

[jvelazquez29]

I would like to add that I too agree that it should either be deprecated or at least add the separator prop to autocomplete. My current use case of separator was to be able to copy and paste column of data from excel to the component and with a RegExp separate the values into individual chips instead of the whole data in a single chip.

[nchaigne]

I'm trying to use "p-autocomplete" instead of "p-chips", but I couldn't find an equivalent to "addOnBlur" that I need. There is a "onBlur" callback, but it does not provide anything useful in the event (only {"isTrusted":true}).

Is it possible to get the current input value in "onBlur" ?

If not, would it be possible to implement an equivalent to "addOnBlur" from "p-chips" ?

Edit : found a workaround to emulate "addOnBlur" from p-chips :

    onBlurMyAutocomplete() {
      let e = <HTMLInputElement>document.getElementById('myAutocompleteParentId')?.querySelector('.p-autocomplete-input-chip input');
      e.dispatchEvent(new KeyboardEvent('keydown', { 'code': 'Enter' } ));
    }

Bit hackish, but it works... :) Of course it would be better to have the component handle these kind of things. In the meantime, I can live with this workaround.

[sujeetjaiswara]

How we can prevent duplicate entry ? Previously we have [allowDuplicate]="false" with chip component.

[sujeetjaiswara]

This fix works equivalently to 'addOnBlur' 🙂

<p-autocomplete         
    formControlName="tags"
    placeholder="Add tags"
    multiple fluid 
    [typeahead]="false"
    (onBlur)="onBlur($event)"
 />

onBlur(e: Event) {
    const inputElement = e.target as HTMLInputElement;
    const inputValue = inputElement.value; 
    if(inputValue) {
      inputElement?.dispatchEvent(new KeyboardEvent('keydown', { 'code': 'Enter' } ));
    }    
}

[arthurb4a]

I used chips to paste content from a sheet, so it would separate the values into chips.

My workaround was to use a textarea subscribing to (input) and (blur) events. Then I use a regex to test for the keys I want to use as separators and split the string. Ex: /\r|\n|;|,| /

Then I show the separated values as a p-chip elements on the bottom to show the "expected" behavior. Worked for my case.

Still, PrimeNG should deprecate its elements before they are removed!

[adama357]

According to PrimeNG's own documentation, "AutoComplete is an input component that provides real-time suggestions when being typed." That is completely different from the purpose of the Chips component...

[Da13Harris]

I'm mostly here to re-iterate what everybody else is saying. It's very disappointing to have the <p-chips> component removed without a proper deprecation period, especially when there isn't equivalent behavior in the alternative. I am having to completely re-write the behavior of a wrapper component because the [addOnTab], [addOnBlur], (onAdd), and (onRemove) features do not have equivalent behavior in the <p-autoComplete> component.

We've been using PrimeNG and upgrading twice a year since Angular v4, but v18 has certainly been the most difficult upgrade to date. Partly due to the complete re-write of the theming API, but mostly due to the significant component changes that happened at the same time.

Please consider taking steps to stabilize your upgrade processes to allow for clearly defined deprecation periods and feature parity when those deprecations occur.

[mcrtricolor]

I also need chips to upgrade my project, i use it too much.

I also use autocomplete and don't understand how these two are compatible.

Thanks in advance!

[cagataycivici]

I apologize, this is a huge mistake on our end. In PrimeVue, it is deprecated and I'm not sure what went wrong. Trying to resolve it.

[kristiyanpetrov]

are you going to add back just to v18 and not to v19 as well?

[cagataycivici]

v18 is in LTS stage so need to think about it but definitely will try for v19. Overall, as the founder of PrimeNG I was away from the project for the past 2 years to focus on other projects, however I'm now back as the project manager. My primary goal is starting with v20, every update should be drop-in replacement. More public information coming soon.

[kristiyanpetrov]

v18 is in LTS stage so need to think about it but definitely will try for v19. Overall, as the founder of PrimeNG I was away from the project for the past 2 years to focus on other projects, however I'm now back as the project manager. My primary goal is starting with v20, every update should be drop-in replacement. More public information coming soon.

i see, the issue that i have in my current project is that we used v17 and the implementation i did with chips was great for my use case and now after we updated to v19 i can't think for any straightforward way to achieve same result, that's why i was hope chips might be returned in v19 as other guys mentioned that autocomplete can't replace chips :)

[cagataycivici]

What is the issue with non typeahead mode of AutoComplete, here is demo. Plan was to deprecate Chips, and offer AutoComplete Multiple with typeahead false but the team made an error and delete Chips.

[kristiyanpetrov]

What is the issue with non typeahead mode of AutoComplete, here is demo. Plan was to deprecate Chips, and offer AutoComplete Multiple with typeahead false but the team made an error and delete Chips.

hmm okay it seems i've miss this but this might work for me, i will try it tomorrow and will report back

[kristiyanpetrov]

@cagataycivici i just tested the example but if i place bulk with numbers for ex. 231213213213 231232121123 2132131232131 213312321321 231321321321 21321321321321 21321321321321 3213213213213 2132132132121

they appear in one chip instead each number to be in separate chip (with p-chips this was worked as expected)

[stephanie-dm]

@cagataycivici : Will p-chips be added again to PrimeNG 19.X? This is a breaking change for us, and we can't wait until version 20 to have this added again. We just spent a lot of time upgrading all our applications to Angular + PrimeNG 19 and now we stumbled upon this almost at the end of the upgrade...

Replacing p-chips with p-autocomplete is not enough: we need the addOnBlur and the separator which we can't seem to configure for p-autocomplete.

We have the PRO support, so I wanted to create a ticket in your JIRA, but I can't log in anymore. When I try to click "contact your JIRA administrator", I get this message: "Your JIRA administrator has not yet configured this contact form.".

[Ronkiro]

Bump, i just got into this and it's kinda bad i will have to nearly implement it by hand

[cagataycivici]

InputChips is now re-added and published in v18.0.2-patch.1, next week also for v19.1.0.

[mcrtricolor]

InputChips is now re-added and published in v18.0.2-patch.1, next week also for v19.1.0.

Could it be reviewed the deprecation of this? We need Chips, it's not the same as autocomplete.

Thanks for the fix!

[adama357]

Thank you @cagataycivici !

We need Chips, it's not the same as autocomplete.

Right, if the plan is definitely to combine Chips into AutoComplete, then I think AutoComplete needs to be renamed.

If you add all of Chips' functionality to AutoComplete and turn on the correct settings to make it behave the same as Chips, at that point calling it "auto-complete" is very confusing.

[cagataycivici]

Yes, but our goal is to make PrimeNG as stable as possible now so renaming a popular component would be the opposite. Instead, we may improve documentation with Chips section and make sure it works exactly as InputChips.

[cagataycivici]

InputChips is now re-added and published in v18.0.2-patch.1, next week also for v19.1.0.

Could it be reviewed the deprecation of this? We need Chips, it's not the same as autocomplete.

Thanks for the fix!

We'll make sure it works exactly like InputChips, e.g. handling of spaces and such. No plans to remove it in near future.