I've encountered some strange behavior with my input field.
Every time a user presses the enter or space key, I want to execute some actions. Once the key is pressed, I need to disable the field until the actions are complete.
Pressing the *enter key (keyCode = 32) works perfectly - the field is disabled until the actions finish.
However, when I press the space key (keyCode = 13), the focus unexpectedly shifts to the next element after disabling the field instead of staying where it should!
Here's how the typescript looks:
podcastsKeyDown(event) {
if(event.keyCode == 32 || event.keyCode == 13) {
this.disableInput = true;
}
}
The HTML code is as follows:
<input type="text" class="form-control" [(ngModel)]="text"
[disabled]="disableInput" (keydown)="keyDown($event)">
If I remove this line:
this.disableInput = true;
the behavior returns to normal. Quite bizarre indeed!
Is there any way to prevent this unexpected focus shift? It's really odd behavior.
Thank you in advance,
Tom