Typescript 3 Angular 7 StopPropagation and PreventDefault not working

Question

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

Answer 1

You have two different events, one is mousedown and another is click.

The e.stopPropagation() only works if both of the events are of the same kind.

You can change the input like this to work as expected:

Live example: https://stackblitz.com/edit/angular-material-basic-stack-55598740?file=app/input-overview-example.ts