View Full Version : DatePicker does't correctly show selected item while navigate with the shortcut keys

4 Jan 2012, 7:31 AM
- Detailed description of the problem
In the DatePicker while navigating the days with the shortcuts keys the current selected day isn't show with the "x-date-selected" style, although the navigation is working fine.
You can test it in the Birthday DateField the Forms example in the "Explorer Demo" ( http://www.sencha.com/examples/explorer.html#forms )

This was correctly working on GXT 2.2.0 (and maybe later too).

- Possible solutions
I think this bug started when was changed this line of the update(DateWrapper date) method on DatePicker class from:

long sel = date != null ? date.clearTime().getTime() : 0;
to (line 1041):

long sel = value != null ? value.resetTime().getTime() : Long.MIN_VALUE;
So one possible working solution is change that line for:

long sel = date != null ? date.resetTime().getTime() : Long.MIN_VALUE;
but i don't know if it break something that i didn't take into account

Another possible working solution is change a if condition on the setCellStyle(Element cell, Date d, long sel, long min, long max) on DatePicker class (line 961) from:

if (t == sel) {

long tActiveDate = activeDate.getTime();
if ((t == sel || t == tActiveDate) && (t != sel || sel == tActiveDate)) {

- GXT version
GXT 2.2.5 - GWT 2.4.0

- Host mode / web mode / both
Both modes

- Browser and version
IE 8, Firefox 9.0.1, Chrome 17.0.963.12 (dev), Opera 11.60

- Operating System
Windows XP SP3

4 Jan 2012, 7:53 AM
We would need to introduce another style to fix this. One style needs to show the currently selected value, the other the currently focused one. Just applying the selected style wont help us, as than it might show value X as selected, although its only keyboard selected.

4 Jan 2012, 10:01 AM
Could be "x-date-active-hover" style (the same style used on mouse over).

Something like this block work when added on setCellStyle() (I don't know the ARIA related attributes, because that I omitted it):

long tActiveDate = activeDate.getTime();
if(t == tActiveDate) {
// ARIA related code
} else {
// ARIA related code

The only downside is that when you move the active date with the keys and then you put the mouse over that item and then mouse out, it loses the "active" style but if you move again with the keys it starts from the last position.

Also, could be more noticeable the "active" style (a personal opinion, that could be resolved through user CSS but would be nice that it be the default).