I have an angular pwa and I have a dialog that pop up when i click a button, when the type is text it works just fine but i need it to be number because of the return type, but when i put type number it unfocus right after, it shows the keyboard for like 0.2 second and then it unfocus, this is only on ios not on android, any idea why?
My HTML:
<div class="container">
<h2 class="title" mat-dialog-title>Insert value</h2>
<div class="flex column" style="height: 100%; width: 100%;">
<form>
<input autocomplete="disable" class="input" id="value" type="number" inputmode="decimal" style="width: 60vw;" [(ngModel)]="input"
name="value">
</form>
<mat-dialog-actions style="display: flex; flex-direction: row; justify-content: space-around; width: 40vw;">
<button class="button" mat-dialog-close mat-dialog-close="false">Cancel</button>
<button class="button" mat-dialog-close [mat-dialog-close]="input">Insert</button>
</mat-dialog-actions>
</div>
</div>
My TS:
import { Component } from '@angular/core';
@Component({
selector: 'app-number-dialog',
templateUrl: './number-dialog.component.html',
styleUrls: ['./number-dialog.component.css']
})
export class NumberDialogComponent {
input!: any
ngOnInit(): void {
document.getElementById("value")?.focus()
}
}
The function that open the dialog:
addWalletMovement(entry: boolean) {
const db = getDatabase()
const user = auth.currentUser
if (user !== null) {
const uid = user.uid;
//This is where the dialog is opened
let dialogRef = this.dialog.open(NumberDialogComponent, {
width: '80vw',
panelClass: 'containerDialog',
position: {
top: '20vh'
}
})
dialogRef.afterClosed().subscribe(result => {
if (result !== "false") {
const folderListRef = ref(db, 'walletfolders/' + uid + "/" + this.walletView.key)
set(folderListRef, {
key: this.walletView.key,
name: this.walletView.name,
movement: this.walletView.movement ?
[{ value: result as number, entry: entry }, ...this.walletView.movement] :
[{ value: result as number, entry: entry }],
}).catch((error) => {
console.error(error);
})
}
})
}
}
Angular version: 15.1.0
As i said with type="text" i have no problem, but as soon as I put type="number" it won't focus on init