Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 use of onmouseup event overwrites native behavior

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.

like image 628
David Gonzalez Avatar asked Dec 30 '15 10:12

David Gonzalez


2 Answers

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.

like image 189
Romain Avatar answered Oct 31 '22 00:10

Romain


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 ?

like image 36
David Gonzalez Avatar answered Oct 31 '22 01:10

David Gonzalez