Angular preventDefault strange behaviour

in my project i am using ngx-context library, which simply displays menu, however, when clicking somewhere inside of it, it closes. Thats why i decided to fix it by using event.preventDefault() + event.stopPropagation(), but for some reason it works not like i am expecting it to work

As you can see in code below i am invoking selectPositioningType() when clicking on div wrapped around mat-checkbox.

<div style="width: 105%; padding: 0; margin: 0; display: flex; justify-content: center;gap: 5px"
(click) = "selectPositioningType(positioningType, $event)">
<mat-checkbox
[checked] = "positioningType.ID === uwbTagsPositioningOptions.PositioningTypeID"
[disabled] = "positioningType.ID === DRTLSPositioningTypeID">
</mat-checkbox>
<span>{{positioningType.Name}}</span>
</div>


Inside of this function i am calling event.preventDefault(). I expect that because of the bubbling event.preventDefault() will only affect div, however, when i am toggling mat-checkbox by clicking exactly on it, it doesn't change it state even through selectPositioningType isn't invoked in that case. Just curious what can be the explanation, isn't bubbling supposed to go from bottom to top?

Btw, when using classic html input[type=checkbox] situation is the same

selectPositioningType(positioningType: TagPositioningType, event: Event) {
event.preventDefault();
event.stopPropagation();
if (positioningType.ID === this.DRTLSPositioningTypeID) {
return;
}
this.uwbTagsPositioningOptions = {PositioningTypeID: positioningType.ID, UwbGatewayID: null};
localStorage.setItem('savedTagPositioningType', JSON.stringify(this.uwbTagsPositioningOptions));
}

Continue reading...