Opened 8 years ago

Closed 8 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 bill)

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 8 years ago by Douglas Hays

Component: Dijit - FormDijit
Owner: changed from Douglas Hays to bill

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.

                cn("onmouseleave", function(){
                        hovering = false;
                        active = false;
                        setClass();
                });

should be something like:

                cn("onmouseleave", function(evt){
                        hovering = false;
                        active = false;
                        setClass();
                        if(!dojo.isDescendant(evt.relatedTarget, this.domNode)){
                                self._set("hovering", false);
                                self._set("active", false);
                        }
                });

comment:2 Changed 8 years ago by bill

Cc: Douglas Hays added
Description: modified (diff)
Milestone: tbd2.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 8 years ago by bill

Summary: lingering hover state when mouse moved quicklyNumberSpinner: lingering hover state when mouse moved quickly

comment:4 Changed 8 years ago by Colin Snover

Priority: lowestlow

Bulk update of open ticket priorities.

comment:5 Changed 8 years ago by bill

Milestone: 2.01.8
Resolution: fixed
Status: newclosed

Fixed indirectly in [27513].

Note: See TracTickets for help on using tickets.