I have a text input inside a div. Clicking on the input should set it to focus and stop the bubbling of the div click event. I've tried the stopPropagation and preventDefault on the text input event but to no avail. The console logs shows that the div click still executes regardless. How to stop the div click event from executing?

// html

<div (click)=divClick() >

  <mat-card mat-ripple>

    <mat-card-header>

      <mat-card-title>

        <div style=width: 100px>

          <input #inputBox matInput (mousedown)=fireEvent($event) max-width=12 />

        </div>

      </mat-card-title>

    </mat-card-header>

  </mat-card>

</div>





// component

@ViewChild('inputBox') inputBox: ElementRef;

divClick() {

    console.log('click inside div');

}



fireEvent(e) {

    this.inputBox.nativeElement.focus();

    e.stopPropagation();

    e.preventDefault();

    console.log('click inside input');

    return false;

}