Angular: stopImmediatePropagation() not working on keydown

Issue

I have an directive attached to a input field, both are listening to the keydown event and in some cases I would like to stop the event bubbeling up in the directive. Calling event.stopImmediatePropagation(); does not really stop the propagation.

Example:

directive

import { Directive, HostListener } from '@angular/core';

@Directive({ selector: '[myDirective]' })
export class MyDirective {
  constructor() { }

  @HostListener('keydown', ['$event']) 
  keydownHandler(event) {
   event.stopImmediatePropagation(); // seems to be not working!!
   console.log('[my-directive.ts]: keydownHandler', event)
  }
}

component with input field

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
    <input type="text" myDirective (keydown)="keydownHandler($event)">
  `
})
export class HelloComponent  {
  @Input() name: string;

  keydownHandler(event) {
    console.log('[hello.component.ts]: keydownHandler', event)
  }
}

I do not understand why event.stopImmediatePropagation(); should not work, any ideas? Is there another way to avoid that the keydown is triggered on the component with the input field?

Solution

Angular optimizes event handlers, if you have two or more handlers for the same event it will add only one listener and dispatch result to all components. It means that stopImmediatePropagation now depends on angular dispatching order. You can add logging or debug order of execution.

Answered By - kemsky