Turn off autocomplete for chips component in primeNG

Question

Has anyone found a succinct way to turn off browser autosuggestions for the p-chips component in primeNG? Or better yet turn off autosuggestions for the entire application. For simple input fields this works:

<input [autocomplete]="'off'"/>

I was hoping there was something similar for p-chips but unfortunately this doesn't seem to work:

<p-chips [autocomplete]="'off'"></p-chips>

Answer 1

My solution was to use a ViewChild decorator to reference the input element inside the p-chips component, and then set the autocomplete attribute to off. In my .ts file:

import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { Chips } from 'primeng/chips';

@Component({
  selector: 'app-chips-wrapper',
  templateUrl: './chips-wrapper.component.html',
  styleUrls: ['./chips-wrapper.component.scss']
})
export class ChipsWrapper implements AfterViewInit {
  @ViewChild(Chips) chips: any;

  ngAfterViewInit(): void {
    if (this.chips) {
      const inputText = this.chips?.inputViewChild?.nativeElement;
      inputText?.setAttribute('autocomplete', 'off');
    }
  }
}