Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#9820 closed defect (fixed)

Calendar: hover style sometimes not applied when mouse moved quickly

Reported by: dennis park Owned by: bill
Priority: high Milestone: 1.5
Component: Dijit Version: 1.3.2
Keywords: calendar, hover, over, dijitCalendarHoveredDate Cc:
Blocked By: Blocking:

Description

the does not work properly -- if the user hovers over several dates in across different weeks the hover over highlighting does not behave as expected. Specifically, in some cases, the highlighting never happens. When viewed in firebug, the highlighting never happens b/c the css class, dijitCalendarHoveredDate is never set on the hovered over date when the bug occurs.

Change History (10)

comment:1 Changed 10 years ago by dennis park

a

comment:2 Changed 10 years ago by bill

Owner: set to Adam Peller
Summary: calendar hoverDateCalendar: hover style sometimes not applied when mouse moved quickly

Hmm, I do see that problem occasionally, although it's hard to reproduce (but I could eventually reproduce on test_Calendar.html on Safari4/mac, FF3.5/mac, and IE8).

I debugged on IE and saw the _onDayMouseOver(evt) occurring where evt.target is a <span> rather than a <td>, which probably explains the problem.

comment:3 Changed 10 years ago by bill

Calendar just sets up on mouseover handler on the Calendar.domNode and then it tries to interpret events to find out which day node to apply them to.

The template for a given day is complicated, it has a <span> inside a <td> and the event may occur on either of those nodes, or maybe both:

<td class="dijitReset dijitCalendarDateTemplate"><span class="dijitCalendarDateLabel"></span></td>

The _onDayMouseOver() method has no code to handle when the event occurs on the <span> inside the <td>. When that happens it needs to put the dijitCalendarHoveredDate class on the <td>, not on the <span>.

_onDayMouseOver: function(/*Event*/ evt){
        // summary:
        //      Handler for when user clicks a day
        // tags:
        //      protected
        var node = evt.target;
        if(node && (node.dijitDateValue || node == this.previousYearLabelNode || node == this.nextYearLabelNode) ){
                dojo.addClass(node, "dijitCalendarHoveredDate");
                this._currentNode = node;
        }
},

I really don't understand the loop in _onDayMouseOut() either:

_onDayMouseOut: function(/*Event*/ evt){
        // summary:
        //      Handler for when user clicks a day
        // tags:
        //      protected
        if(!this._currentNode){ return; }
        for(var node = evt.relatedTarget; node;){
                if(node == this._currentNode){ return; }
                try{
                        node = node.parentNode;
                }catch(x){
                        node = null;
                }
        }
        dojo.removeClass(this._currentNode, "dijitCalendarHoveredDate");
        this._currentNode = null;
},

Oh also, the summaries for those two functions are wrong.

comment:4 Changed 10 years ago by Adam Peller

(In [20063]) First pass at keyboard accessibility for Calendar (does not fully address DateTextBox? containment) Refs #6430. !strict Also, fix event doc summaries. Refs #9820

comment:5 Changed 10 years ago by bill

Milestone: tbd1.5

comment:6 Changed 10 years ago by bill

(In [20691]) Comment out hover test, please re-enable it when #9820 is fixed. Refs #9820.

comment:7 Changed 10 years ago by bill

Owner: changed from Adam Peller to bill
Status: newassigned

comment:8 Changed 10 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [21172]) Applying modified version of fix from lucid branch for hover effect on calendar day nodes. Fixes #9820, refs #10527 !strict.

comment:9 Changed 10 years ago by bill

(In [21173]) Simplify _onMouseOut() logic for ignoring spurious events, refs #9820 !strict.

comment:10 Changed 10 years ago by bill

(In [21812]) Avoid exception, I just saw evt.relatedTarget be undefined on an onmouseout event (IE6, high contrast mode). Refs #9820 !strict.

Note: See TracTickets for help on using tickets.