Autocomplete is coming on Country Search

[fareed-glovision]

While selecting the country, when I search for the country on dialog its showing autocomplete. which is covering the country search list. is there any way to turn off autocomplete for search country field.

[pasevin]

Not at the moment, PR would be great for this.

[leifermendez]

@pasevin try with this, it's worked for me.

  ngAfterViewChecked(): void {
    const getElement: ElementRef | any = document.querySelector(`ngx-intl-tel-input .search-container input`);
    if (getElement && !getElement.getAttribute('autocomplete')) {
      this.render.setAttribute(getElement, 'autocomplete', 'none');
      this.render.setAttribute(getElement, 'type', 'search');
    }
  }

Remember implement in your class component

export class YOUR_COMPONENT implements OnInit, AfterViewChecked <------------ *************

[victorbadila]

+1 this would be a nice to have thing for cleaner UX

I tried @leifermendez 's solution, but I'm not sure who this.render is in this case

The solution that worked for me:

ngAfterViewChecked(): void {
  const input = document.getElementById('country-search-box');
  if (input) {
    input.setAttribute('autocomplete', 'off');
  }
}

[rene-guerrero]

Still 2022 and I needed this so much. Previous workarounds didn't work for me, because i had multiple ngx-intl-tel-inputs in the same page. So i solved changing @leifermendez code like this:

 ngAfterViewChecked(): void {
    const elements: any = document.querySelectorAll(`ngx-intl-tel-input .search-container input#country-search-box`);
      elements.forEach(element => {
        if (element && !element.getAttribute('autocomplete')) {
          this.render.setAttribute(element, 'autocomplete', 'none');
          this.render.setAttribute(element, 'type', 'search');
        }
      });
  }

Btw this.render is from: constructor(private render: Renderer2)