Primeng: Add mask for autocomplete

[splincode]

I need a mask in the field and at the same time a drop down list, what do I do?

[splincode]

How to show autocomplete primeng?

<div class="phone-field">
  <p-autoComplete
    *ngIf="dropdownList"
    inputStyleClass="form-control"
    [dropdown]="true"
    [ngModel]="value"
    [suggestions]="suggestions"
    [forceSelection]="true"
    [ngModelOptions]="{ updateOn: 'blur' }"
    (ngModelChange)="updateModel($event)"
    (completeMethod)="searchMatch($event)"
    #autoComplete>
  </p-autoComplete>

  <p-inputMask
    styleClass="form-control"
    [mask]="mask"
    [placeholder]="mask"
    [ngModel]="value"
    (ngModelChange)="searchInputMatch($event, true); updateModel($event)">
  </p-inputMask>
</div>

When I written in p-inputMask, I need auto open autocomplete

I trust (but not working):

 this.autoComplete.focus = true;
      this.autoComplete.bindDocumentClickListener();
      this.autoComplete.show();

My component:

import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { AutoComplete } from 'primeng/primeng';

export interface SearchQueryEvent {
  query: string;
  openDropdown?: boolean;
}

@Component({
  selector: 'phone-field',
  templateUrl: './phone-field.component.html',
  styleUrls: ['./phone-field.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class PhoneFieldComponent {

  @Input() public value: string;
  @Output() public valueChange: EventEmitter<string> = new EventEmitter<string>();
  @Input() public mask: string = '[phone]';
  @Input() public dropdownList: string[] = null;
  @ViewChild('autoComplete') public autoComplete: AutoComplete;
  public suggestions: string[] = [];

  public updateModel(phoneFieldValue: string) {
    this.valueChange.emit(phoneFieldValue);
  }

  public searchMatch(event: SearchQueryEvent) {
    const { query, openDropdown } = event;
    const phoneFieldValue: string = this.excludeSpecialChar(query);
    this.suggestions = this.filteredSuggestions(phoneFieldValue);

    if (openDropdown) {
      console.log(this.autoComplete)
      this.autoComplete.focus = true;
      this.autoComplete.bindDocumentClickListener();
      this.autoComplete.show();
    }
  }

  public searchInputMatch(query: string, openDropdown: boolean = false) {
    this.searchMatch({ query, openDropdown });
  }

  private filteredSuggestions(query: string) {
    return this.dropdownList.filter((phoneNumber: string) => {
      const phoneFieldValueFromList = this.excludeSpecialChar(phoneNumber);
      return phoneFieldValueFromList.indexOf(query) > -1;
    });
  }

  private excludeSpecialChar(stringValue: string = '') {
    const regexp: RegExp = /\D/g;
    return stringValue.replace(regexp, '');
  }

}

[splincode]

If I rewrite code:

this.autoComplete.show = function() {
        if (this.multiInputEL || this.inputEL) {

          this.panelVisible = true;
          if (this.appendTo) {
            this.panelEL.nativeElement.style.minWidth = this.domHandler.getWidth(this.el.nativeElement.children[0]) + 'px';
          }
          this.panelEL.nativeElement.style.zIndex = ++DomHandler.zindex;
          this.domHandler.fadeIn(this.panelEL.nativeElement, 200);
          this.bindDocumentClickListener();

        }
      };

It's work's

[splincode]

Problem in hasFocus param

[cagataycivici]

No plans to support it at the moment.

[kadosh1000]

In my opinion, p-inputMask should be a directive instead of a component so it can be used on top of regular inputs and primeng inputs (such as the p-autocomplete)