Why hot key does not emit events?

Question

  const next$ = fromEvent(document, 'keydown').pipe(
    takeUntil(this.takeUntil$),
    tap((e) => console.log(e)),
    filter(
      (e: any) => !e.shiftKey && e.code === KeyCode.Backspace && e.ctrlKey
    )
  );
  next$.subscribe();

When user presses backspace with ctrl I dont get event

Answer 1

Use document.body:

Stackblitz

https://w3c.github.io/uievents/#event-type-keydown

Event.target : focused element processing the key event or if no element focused, then the body element if available, otherwise the root element

Answer 2

To handle the key press sequence of Backspace followed by Ctrl, you can subscribe to both keyup and keydown event, so that you can keep track and updates the state of the isCtrlDown and isBackspaceDown variables accordingly

Refer stackblitz: https://stackblitz.com/edit/angular-ef3qgy?file=src/main.ts

isCtrlDown = false;
isBackspaceDown = false;

ngOnInit(): void {
  const keyDown$ = fromEvent(document, 'keydown');
  const keyUp$ = fromEvent(document, 'keyup');
  merge(keyDown$, keyUp$)
    .pipe(
      filter(
        (v) =>
          (v as KeyboardEvent).key === 'Control' ||
          (v as KeyboardEvent).key === 'Backspace'
      ),
      tap((v) => {
        if ((v as KeyboardEvent).key === 'Control') {
          v.type === 'keydown'
            ? (this.isCtrlDown = true)
            : (this.isCtrlDown = false);
        } else {
          v.type === 'keydown'
            ? (this.isBackspaceDown = true)
            : (this.isBackspaceDown = false);
        }
      }),
      filter(() => this.isCtrlDown && this.isBackspaceDown)
    )
    .subscribe(() => {
      console.log('Ctrl + Backspace pressed');
    });
}