Opened 10 years ago
Closed 9 years ago
#13385 closed defect (fixed)
NumberSpinner: lingering hover state when mouse moved quickly
Reported by: | Stephen Chung | Owned by: | bill |
---|---|---|---|
Priority: | low | Milestone: | 1.8 |
Component: | Dijit | Version: | 1.6.1 |
Keywords: | Cc: | Douglas Hays | |
Blocked By: | Blocking: |
Description (last modified by )
To reproduce:
- Create NumberSpinner
- Move cursor into text box of NumberSpinner (color changed)
- Move cursor into content of the arrows (not the *borders*)
- Move cursor out of arrows (not back into text box)
- Color of text box is not reset, still blue
Notice that if you move the cursor first onto the *borders* of the *arrows* then move out, the color will be reset. Therefore, only moving from the *content* of the arrows will have this error.
Test it with the latest versions of Chrome and FireFox.
Strangely, IE9 doesn't have this problem, although earlier versions do.
Change History (5)
comment:1 Changed 10 years ago by
Component: | Dijit - Form → Dijit |
---|---|
Owner: | changed from Douglas Hays to bill |
comment:2 Changed 10 years ago by
Cc: | Douglas Hays added |
---|---|
Description: | modified (diff) |
Milestone: | tbd → 2.0 |
Summary: | NumberSpinner hover color not reset (Claro theme) → lingering hover state when mouse moved quickly |
Hmm, that sounds like a browser bug although I suppose there's some fine print somewhere saying that mouseleave events aren't reliable.
Doug - your solution will work for this case, but it's depending on the sub-node being registered with _CssStateMixin, via this code in _Spinner.js:
cssStateNodes: { "upArrowNode": "dijitUpArrowButton", "downArrowNode": "dijitDownArrowButton" },
If there wasn't a mouseout event handler registered for NumberSpinner.upArrowNode etc, then the problem comes back.
For 2.0, or maybe earlier, I plan to use switch to using CSS pseudo-classes (:hover, :active, :focus), at which point this problem will be resolved. Not sure if it's worth [partially] fixing before that.
comment:3 Changed 10 years ago by
Summary: | lingering hover state when mouse moved quickly → NumberSpinner: lingering hover state when mouse moved quickly |
---|
comment:5 Changed 9 years ago by
Milestone: | 2.0 → 1.8 |
---|---|
Resolution: | → fixed |
Status: | new → closed |
Fixed indirectly in [27513].
This is a timing problem with _CssStateMxin.js
When the mouse moves quickly from the button node to the document body, then a mouseleave event on the button node is generated but not a mouseleave from the widget domNode. But the mouseleave event's relatedTarget is a node outside the widget but this information is ignored.
should be something like: