Rating with custom template sticky hover

[alc86]

The rating control with an custom template does strange things at hover. If you spin around with your mouse some times the UI displays the wrong content. Its hard to describe and so I have create a show video and a Plunker example to reproduce.

Plunker:
http://plnkr.co/edit/tEIKFOoGzUP8HCBnyhE4?p=preview

Video:
Plunker - Google Chrome 20.02.2018 10_42_32.zip

[maxokorokov]

Looks like resurfaced #1204
However I can't reproduce in any of the browsers on the macOS this time.

[pkozlowski-opensource]

I can't reproduce either... @alc86 what is the exact OS / browser version that you are using?

[alc86]

I use windows 10 with Google Chrome.

[tschuegge]

alc86 and I have tested this:

• macOS
  • Chrome: easy to reproduce
  • Firefox: harder to reproduce
  • Safari: impossible to reproduce
• Windows
  • Chrome: easy to reproduce
  • Firefox: harder to reproduce
  • Edge: impossible to reproduce
  • IE 11: impossible to reproduce

Steps to reproduce:

1. Click on the first heart
2. Move the mouse immediately and fast outside on the right side (over the hearts)

[maxokorokov]

Ok, the problem is that we were conditionally removing and adding DOM nodes in the rating template in the demo. When moving cursor from left to right DOM nodes were recreated and:

• mouseenter on a star was triggered twice (old node, then new node)
• mouseleave on the whole rating component was not triggered sometimes (depending on the mouse move speed)

(see PR for updated demo, note that in the demo rating is readonly)