CODEWITHSUNDEEP
angular
Andreas
Andreas

Reputation: 209

Keydown event not handled after button is disabled by click

In Angular I use @HostListener to listen for keydown events on my page. I also have a button, which is disabled after I click it.

My problem is that in Firefox I don't get the keydown events after I press the button. I think it is because the whole page loses focus. The problem is not there in Chrome.

Here is an example of the behavior:

import { Component, NgModule, HostListener } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
    <button [disabled]="disabled" (click)="disabled = true">Click me</button>
    <p>{{key}}</p>
  `,
})
export class App {
  disabled: boolean = false;
  key: string;

  @HostListener('document:keydown', ['$event'])
  private handleKeyboardEvent(event: KeyboardEvent) {
      this.key = event.key;
  }
}

How do I keep getting the keydown events after I disable the button?

Working Plunker example

Upvotes: 0

Views: 419

Answers (1)

Philippe Escure
Philippe Escure

Reputation: 149

I can't reproduce on chrome using the plunker. What's your browser ?

Wathever you could try to change the focus. Something like :

import { Component, NgModule, HostListener } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
    <button [disabled]="disabled" (click)="disable()">Click me</button>
    <p>{{key}}</p>
  `,
})
export class App {
  disabled = false;
  key: string;

  @HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
      this.key = event.key;
  }

  disable() {
     this.disabled = true;
     document.activeElement.blur();
  }
}

Upvotes: 1

Related Questions