How do I get chip like text from user free input using p-autocomplete? (Alternative to p-chip)

by

Summary

The issue at hand is migrating from p-chips to p-autocomplete in Primeng, specifically to achieve a chip-like text input with free text entry and grouping similar to the p-chips component. The goal is to allow users to input text freely, without selecting from suggestions, and to display the input text as chips with a cross icon for removal.

Root Cause

The root cause of the issue is the difference in functionality between p-chips and p-autocomplete. Key points include:

  • p-chips allows for free text input and automatically creates chips when a separator is entered.
  • p-autocomplete is designed for selecting from a list of suggestions, but can be configured for free text input.
  • The [multiple] attribute in p-autocomplete allows for multiple selections, but does not automatically create chips.

Why This Happens in Real Systems

This issue occurs in real systems due to:

  • Version upgrades: Upgrading from Primeng 17.18.12 to 19.1.3 introduces changes in component functionality and recommendations.
  • Component replacement: Replacing p-chips with p-autocomplete requires adjustments to achieve similar functionality.
  • Configuration challenges: Properly configuring p-autocomplete for free text input and chip-like display requires understanding of its attributes and limitations.

Real-World Impact

The impact of this issue includes:

  • User experience: Users may not be able to input text freely or see their input as chips with a cross icon for removal.
  • Development time: Developers may spend significant time trying to configure p-autocomplete to mimic the behavior of p-chips.
  • Application functionality: The application may not function as intended, leading to user frustration and potential data entry errors.

Example or Code

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    
    
  `,
})
export class ExampleComponent {
  control = new FormControl();

  onBlur() {
    const value = this.control.value;
    if (value && typeof value === 'string') {
      this.control.setValue([value]);
    }
  }

  onChange(event) {
    if (event && event.originalEvent) {
      const input = event.originalEvent.target as HTMLInputElement;
      const value = input.value;
      if (value.includes(',')) {
        const chips = value.split(',');
        this.control.setValue(chips.map((chip) => chip.trim()));
        input.value = '';
      }
    }
  }
}

How Senior Engineers Fix It

Senior engineers fix this issue by:

  • Understanding the requirements: Clearly defining the needed functionality and user experience.
  • Configuring p-autocomplete: Properly setting up p-autocomplete with attributes like [multiple], (onBlur), and (onChange) to achieve free text input and chip-like display.
  • Implementing custom logic: Writing custom code to handle events like onBlur and onChange to create chips from user input.

Why Juniors Miss It

Juniors may miss this solution due to:

  • Lack of experience: Limited familiarity with Primeng components and their configurations.
  • Insufficient understanding: Not fully grasping the requirements and how to achieve them with p-autocomplete.
  • Overlooking custom logic: Failing to recognize the need for custom event handling to create the desired chip-like functionality.

Leave a Comment