Set focus on p-inputNumber

Question

I open a p-dialog with a p-inputNumber inside, but I don't manage to set focus on it.

I tried to put autofocus, as you see, but it doesn't work. The focus remains on the button I pressed to open the dialog. How can I do? Thanks.

<p-dialog header="Title" [(visible)]="displayModal" [modal]="true" [style]="{width: '40vw'}"
  [baseZIndex]="10000" [draggable]="false" [resizable]="false" [closable]="false">
  <p class="p-m-0">
    <p-inputNumber size=3 [(ngModel)]="field" maxlength="3" autofocus></p-inputNumber>
  </p>
  <ng-template pTemplate="footer">
    <button >Ok</button>
  </ng-template>
</p-dialog>

score 2 · Accepted Answer · answered Dec 03 '20 at 10:28

2

First, add a reference to your input in order to manipulate it from typescript via a ViewChild:

<p-inputNumber size=3 [(ngModel)]="field" maxlength="3" #input></p-inputNumber>

and

@ViewChild("input") elm;

Then, set the focus to this input once the dialog shows up by using onShow method:

(onShow)="setFocus()"

and

setFocus() {
    this.elm.input.nativeElement.focus();
}

See demo

answered Dec 03 '20 at 10:28

Antikhippe

6,316
2
28
43

Antikhippe can you help me again? In the previous example, If I want to launch a function when I press Enter, what I have to do? – doinel Dec 03 '20 at 15:03
You can use `onInput` event according to [PrimeNG doc](https://primefaces.org/primeng/showcase/#/inputnumber) to do that. – Antikhippe Dec 03 '20 at 15:15
onInput is only fired when I type numbers, but not when I press Enter – doinel Dec 04 '20 at 13:11
You're right. You can use `keypress` event instead. – Antikhippe Dec 04 '20 at 14:21

Set focus on p-inputNumber

1 Answers1