Date Picker : why is the "focused" day selected and not the "active" day when picking a date?


#1

Hi everybody :smile: !

I’ve got an understanding problem with the behaviour of the date picker and the way it selected the dates…

For some context, I’m currently trying to change the look-and-feel of the date picker (in term of colors, nothing more :wink: )

But there is something I don’t totally understand (so this might be just a stupide question)

As of now, where I stand it’s the 28/07/19 (DD/MM/YY format) which is the “yellow-ish” date on the screenshot.
The blue one, is the day I’ve selected with my mouse in the date picker… If I click Done or press Enter the 18/07/19 appears where it should, nothing strange here …

If, I do the same thing again but navigate to the a previous month (May, in this case) using the my keyboard (Shift + Left Arrow) and not the .prev arrow near the name of the month, the 18 I’ve selected in July 2019 is still there in a darker blue.
If I select another day in May using my mouse ( the 8 here), it appears in blue, like my 18 did in July previously.
(So far, I know that in this case, in terms of css, the 8 is an .active day and the 18 is .focused one)

Now, If I click Done it’s the 18 (.focused) that’s picked up by the date picker, but not the 8 (.active) I just selected.
DP4

What I don’t understand is why ?

Shouldn’t my manual selection (the 8) in May 2019 override my previous selection in July 2019 ?

This only happens when I mix keyboard and mouse to pick up a date.

Using only my keyboard, when I have 2 days highlighted in a month (one .focused and one .active), I can use the arrows of my keyboard to go to the date I’ve picked with my mouse and then click Done.

If I use only my mouse, and .prev/.next above, near the name of the month I’m currently in to switch to another month, the .focused darker-blue day doesn’t appear and I can select a day as usual.

I know this is just “details” :wink: … but it troubles me a little :wink:

Thank you very much in advance for the possible clarification :blush: