CODEWITHSUNDEEP
javascriptangular7event-bubblingtypescript3.0
user1019042
user1019042

Reputation: 2218

Typescript 3 Angular 7 StopPropagation and PreventDefault not working

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;
}

Upvotes: 39

Views: 111786

Answers (3)

Himanshu Patni
Himanshu Patni

Reputation: 195

Try with (click)="$event.stopPropagation()". It might help as it worked for me in my scenario.

Upvotes: 5

Gonzalo.-
Gonzalo.-

Reputation: 12672

You can only stop propagation for the same event.

Your fireEvent function stops propagation for your mousedown event, but not for your click event.

If you want to stop propagation to click, try to add another click event on the input and stop propagation from there

For instance

<input #inputBox matInput (click)="$event.stopPropagation()" max-width="12" />

Your other function only needs to know what is required, that is, set focus

fireEvent(e) {
    this.inputBox.nativeElement.focus();
    console.log('click inside input');
}

preventDefault() prevents the default behaviour, it is not related to bubbling or not the events, so you can safely ignore it

Upvotes: 21

Daniel Pi&#241;eiro
Daniel Pi&#241;eiro

Reputation: 3149

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:

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

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

Upvotes: 31

Related Questions