Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#15196 closed defect (fixed)

regression: focus css state not being applied to subnodes

Reported by: Douglas Hays Owned by: bill
Priority: high Milestone: 1.8
Component: Dijit Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

For ComboButton's, when the arrow node is focused, the sub node no longer gets dijitDownArrowButtonFocused applied. This worked in Dojo 1.7 and started failing in [27513]. On a related note, the left side never has gotten *Focused applied but probably should.

Attachments (1)

testDownArrowButtonMouseHover.html (1.1 KB) - added by Paul Christopher 7 years ago.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 7 years ago by Douglas Hays

Milestone: tbd1.8
Owner: set to bill
Priority: undecidedhigh
Status: newassigned

comment:2 Changed 7 years ago by bill

Description: modified (diff)
Summary: regression: css states not being applied to subnodesregression: focus css state not being applied to subnodes

The focus isn't being tracked anymore. I was thinking that the CSS classes for focus weren't being used anymore but rather we always display focus using the browser's native focus outline... apparently though the CSS class is being used in this case. I'll try adding handlers for "focusin"/"focusout".

Last edited 7 years ago by bill (previous) (diff)

comment:3 Changed 7 years ago by bill

Resolution: fixed
Status: assignedclosed

In [28386]:

Re-enable _CssStateMixin to track focus events on widget subnodes since legacy themes (tundra, nihilo, soria) are using that feature for ComboButton's in Toolbars on IE.

Refs #14568, fixes #15196 !strict.

comment:15 Changed 7 years ago by bill

In [28695]:

The code to track focus/blur events on widget sub-nodes was unintendedly running for the widget root nodes too.

This was problematic since dijitSelectFocus needs to be set not only when the Select.focusNode has focus, but also when the Select's drop down menu has focus... even though the menu is a child of <body>.

Refs #15196, fixes #15431 !strict

comment:16 Changed 7 years ago by bill

In [28728]:

DOMNode.hasAttribute() isn't available on IE6/7, so use getAttribute() instead, refs #15196, #15431 !strict

comment:17 Changed 7 years ago by Paul Christopher

I'm not sure if this bug has been completely fixed. Sometimes for DateTextBoxes and TimeTextBoxes "dijitDownArrowButtonHover" is not applied to the drop down button.

Steps to reproduce the issue:

Visit http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html, select tab "Text Input Widgets". Now without clicking, place the mouse over the down arrow button of DateTextBox and TimeTextBox. They remain in the same color. "dijitDownArrowButtonHover" is never applied to these nodes.

Now change to the tab "Select Widgets". Again place the mouse over the down arrow button of Select and FilteringSelect. "dijitDownArrowButtonHover" is correctly applied there.

Furthermore see attached test case: It is a very simple test page using Dojo 1.7.2 without the above fixes [sic]. Strangely, "dijitDownArrowButtonHover" is applied there correctly for TimeTextBox and DateTextBox. The complexity of the page seem to matter somehow.

Changed 7 years ago by Paul Christopher

comment:18 Changed 7 years ago by bill

Thanks, you are right that the DateTextBox and TimeTextBox arrows aren't getting a hover effect. Not sure what the point of your test case: it works against 1.7.2 but fails against trunk, just like themeTester.html.

comment:19 Changed 7 years ago by bill

In [29157]:

Fix hover effect for down arrow of DateTextBox and TimeTextBox, refs #15196 !strict.

comment:20 Changed 7 years ago by Paul Christopher

I have added the test case for 1.7.2. since I had the problems mentioned above in my recent project, too. (The project was using 1.7.2, now I have moved to 1.8.).

The strange thing is: the above test case for 1.7.2 seems to work, but in my recent project (which was using 1.7.2), it doesn't. There, the "dijitDownArrowButtonHover" classes were missing, too.

That's why I said, it might have something to do with the complexity of the page, i.e. there might be another bug in code that applies the css state mixins?

Or to put it short: Not only trunk is affected of these problems. I experienced the same problems with 1.7.2., but I cannot reproduce the error with the above test case. There, it seems to work for 1.7.2. However I used not to work in my recent 1.7.2. project.

comment:21 Changed 7 years ago by Paul Christopher

Maybe have a look at this:

http://archive.dojotoolkit.org/dojo-2012-02-01/dojotoolkit/dijit/themes/themeTester.html?locale=de

I think this could be some old 1.7.2. "trunk" code (The code dates back to 2012-02-01. 1.7.2. was released on 2012-02-16). Change to the tab "Text Input Widgets". The hover effect is missing there for DateTextBox and TimeTextBox, too.

Now run my attached test case which uses 1.7.2. (via googleapis). For some unknown reason, the hover effect works there.

Why?

comment:22 Changed 7 years ago by bill

I think it's because that link is not 1.7.2. Try http://download.dojotoolkit.org/release-1.7.2/dojo-release-1.7.2/dijit/themes/themeTester.html. The hover effects are working there.

Note: See TracTickets for help on using tickets.