React-datepicker: Inline version selects multiple dates

[MD-AZMAL]

Describe the bug
A clear and concise description of what the bug is.
In Inline Version when you select some other date the initial selected date remains the same with blue background
To Reproduce
Steps to reproduce the behavior:

1. Go to 'inline version or inline portal version in docs'
2. Click on any date
3. See error when multiple dates are selected

Expected behavior
Only one date is supposed to be selected
Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Chrome

[jxa8057]

I'm also running into this, where the current day of the month always appears selected, event when changing months.

[MD-AZMAL]

@jxa8057 do let me know if you find any solution

[PoltP]

It can be easily reproduced using demo after "Next" or "Previous" button is clicked. Looks like there is incorrect logic with 'react-datepicker__day--keyboard-selected' style.
This bug makes component unusable in production.

[MD-AZMAL]

@PoltP yes i think so, is there any work around ?

[PoltP]

@MD-AZMAL I have not found any usable workaround, now I've temporary disabled keyboard navigation using disabledKeyboardNavigation property and it removes unexpected selection.

[MD-AZMAL]

@PoltP okay got it! still keeping this issue open please share if you find any other solution

[camilaazuma]

Same issue here, anyone got updates? 👀

[camilaazuma]

Hey @MD-AZMAL, made this is a workaround until the lib is properly fixed. Basically:

1. Make sure to have a ref to the calendar
2. Whenever a day is clicked, search for the keyboard-selected class and removes it from the element.
3. Then adds the same class to the current selected day

This only solves the layout issue. Focus is still on original keyboard-selected element.
Don't forget to declare the selected on your useEffect, so it triggers every time the date changes.

```
useEffect(() => {
if (inline) {
const keyboardSelected = ref.current.calendar.componentNode.querySelector('.react-datepicker__day--keyboard-selected');
const mouseSelected = ref.current.calendar.componentNode.querySelector('.react-datepicker__day--selected');

  if (keyboardSelected && mouseSelected) {
    keyboardSelected.classList.remove('react-datepicker__day--keyboard-selected');
    mouseSelected.classList.add('react-datepicker__day--keyboard-selected');
  }
}

}, [selected, inline]);

[Svish]

I don't think the issue here is actually _multiple selected_ dates. It's that:

1. --keyboard-selected looks way too similar to _actually selected_, and
2. using mouse to select a date, doesn't update/focus the keyboard selected date in the inline version.

Style
This should be fixed for both inline and non-inline version; maybe use outline/border instead of just slightly lighter color?

Selection
For non-inline (see e.g. the "Don't hide calendar on date selection" sample) this does not seem to be an issue; the keyboard selected date changes to the one you select with the mouse, so if I click on 5th, and press right-arrow, it goes to 6th, regardless what I did with keyboard beforehand.

For inline, however, the keyboard selected stays the same, regardless of mouse clicking or month changing.

I feel it's OK for keyboard selection to stay when changing months (but it looks confusing now because styles are so similar). But when _clicking_ on a day, the keyboard selection _should_ also update and equal the selected date. Currently, if I keyboard navigate to the 15th, then click on the 5th and press right arrow, it will go to the 16th, rather than the 6th which I would expect it to.

(hope all that made sense...?)

[MD-AZMAL]

@camilaazuma Thanks for the workaround i'll definitely try it!

@Svish Ya got your point it actually happens when selected from mouse

[stearruda]

Any news about this issue?
I believe it's almost impossible to target the style by CSS.

[Svish]

@stearruda We had to "re-do" the styling anyways to make it fit in with our design, but basically what we did was to simply remove the following styling, because we noticed our existing :focus styling still worked.

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}

So a workaround for you could be to override those with initial or inherit or transparent or whatever works. Just remember to have a :focus style still. We use this:

:focus {
  outline: @color-focus auto 0.2em;
}

[stearruda]

Thanks @Svish!

I've realized a couple of problems from my side which that's why was not working. :see_no_evil:
It does work changing on CSS.

One extra point to make is that the day class also needs to have a styling for outline otherwise it comes by the click too. For example:

.react-datepicker__day {
   outline: white;
 }

[martijnrusschen]

Fixed by #2436

[archywillhe]

hmm still running into this; though am on the latest version