Angular2 use of onmouseup event overwrites native behavior

Question

I am currently developing an app using angular2 and typescript. I need to use a range slider input to send a control and i need to know when the input is being used, ie when the user is dragging it.

I tried using a combination of the "mouseup" and "mousedown" event. When you click the slider the "mousedown" event is triggered and the "isActive" variable is set to true, then when the user stops using the slider the "mouseup" event is triggered and the "isActive" variable is set to false.

<input type="range" (mousedown)="isActive = true" (mouseup)="isActive = false" />

That part works perfectly but the fact that I set up an action to do on the "mouseup" event looks to overwrite a native action and the slider is never released.

Here is a simple plunker showing the behavior : https://plnkr.co/edit/PJqFp7dFREog9rE7Shdx

Is it me that do not implement a necessary function to make this work ? or is it a "bug" from angular2 that does not propagate events and just overwrites them ?

Thank you in advance.

Solution 1

https://plnkr.co/edit/KMmJVMhbnmdjVha92S5S?p=preview

I made your code work with wrapping your isActive assignations in method. Take a look at the plnkr.

The reason why the behaviour differ is because when you do

isActive = true

It returns true, and continue the event bubbling. And when you do

isActive = false

It returns false, and prevent event from bubbling.

Solution 2

I found a way to make this works. I add a $event.propagate() in the "mouseup" event like this :

<input type="range" (mousedown)="isActive = true" (mouseup)="isActive = false;$event.propagate();" />

But is normal that i have to do that for it to work correctly ? should not the event be propagated automaticaly by angular2 ?