p-chips: unable to paste partial item when separator is set

[AndreasHae]

Describe the bug

When copy+pasting text into a p-chips component while having the separator input set, the text is immediately added as an item. This is bad because I cannot edit the pasted text before adding it as an item (for example when I copied a letter too much).

Environment

See versions below

Reproducer

No response

Angular version

17.0.6

PrimeNG version

17.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

No response

Steps to reproduce the behavior

1. Add a p-chips component with separator set to any regex
2. Copy some text
3. Paste it into the p-chips input
4. The copied text is immediately added as an item

Expected behavior

The text should be pasted into the input field. I can still make changes to it, and once I press Enter (or enter a character matching the separator), my input is added as an item.

[AndreasHae]

For anyone else experiencing this issue, I resolved it by overriding the paste behavior in my own directive:

@Directive({ selector: "p-chips[pasteEditable]", standalone: true })
class ChipsPasteEditableDirective {
  constructor(chipsComponent: Chips) {
    chipsComponent.onPaste = (event: ClipboardEvent): void => {
      if (!chipsComponent.disabled) {
        if (event.clipboardData && chipsComponent.separator) {
          event.preventDefault();

          const splitInputs = event.clipboardData
            .getData("Text")
            .split(chipsComponent.separator);
          const lastInput = splitInputs.pop();

          for (const input of splitInputs) {
            chipsComponent.addItem(event, input, true);
          }
          const inputElement = chipsComponent.inputViewChild
            .nativeElement as HTMLInputElement;
          inputElement.value = lastInput ?? "";
        }

        chipsComponent.updateFilledState();
      }
    };
  }
}

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,