Selected day is highlighted on all months

[bfeucht-wof]

trafficstars

Describe the bug When a day has been selected, scrolling between months highlights the same date on every month. For example, if I select May 5th, when I scroll to any other Month, the 5th day is highlighted. The exception to this is that when a date is selected that doesn't exist in the currently visible month, the highest day value in that month is highlighted instead. E.g., if I have selected January 31st, when I scroll to February, the 28th will be highlighted.

To Reproduce Steps to reproduce the behavior:

1. Select a date in any month
2. Scroll to any other month
3. Observe that the same day is highlighted in that other month (or, if the selected day is larger than the number of days in the month, the largest date is highlighted).

Expected behavior When I scroll to a month that does not have a date selected, I should not see any days highlighted.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 112.0.5615.138

Additional context How the component is used:

<DatePicker
      selected={date}
      onChange={(d) => setDate(d ?? new Date())}
      className="flat-date-picker"
  />

Custom styling:

.flat-date-picker {
    background-color: var(--theme-bkg-primary-color);
    color: var(--theme-main-text-color);
    border: none;
    width: 10rem;
}

[martinmanzo]

+1 For the moment I fixed by disabling keyboard navigation (it makes sense in my UX): disabledKeyboardNavigation

[bfeucht-wof]

Oh thanks @martinmanzo. This workaround suffices for me., but hopefully a fix comes soon that doesn't require this!

[cwses1]

I have the same problem and it is resulting in a huge usability problem. I use a lot of inline calendars - sometimes with multiple months open - and when stuff is highlighted without the user doing it they get ultra confused. My user base has no problem sending critical feedback about this.

[cwses1]

The disabledKeyboardNavigation workaround did not have any effect for me.

• react-datepicker 4.1.1
• OS: Windows 10
• Firefox 113.0.1 (64-bit)
• React 17.0.2

[martinmanzo]

@cwses1 Actually this is only a css issue. If it's that critical the change the CSS as a workaround.

[cwses1]

That's great! What is the CSS fix so I can renable keyboard navigation and get the best of both worlds!

[svip]

This is compounded when using selectsRange. Because all days before and including the selected day have the CSS class react-datepicker__day--in-selecting-range set, meaning they appear as if in the range the user is about to select.

Though, I wouldn't describe this as merely a CSS issue, since the wrong days are given the wrong CSS classes.

[aparnasharma285]

Seeing same issue.

[3CordGuy]

Also have this issue. Disabling keyboard navigation is not a great solution for us.

[LGLabGreg]

My understanding is that there is a logic to keep track of the previously selected date or the previous date that was tabbed to using keyboard, and set that date as the default date on other months for accessibility purposes, so that users can tab directly to that date even in other months. That's good. However being an accessibility feature I can't think of a case where that date should be highlighted unless it is focused using keyboard?

My fix was to only apply the style when the date element has focus;

.react-datepicker__day--keyboard-selected {
  background: none;
  color: inherit;
  &:focus {
    background-color: #e1e1e1;
    color: #000000;
  }
}

[khnbzkrt]

Worked sass code for me.

&--selected,
  &--keyboard-selected {

    color: black;
    background-color: inherit !important;

    @at-root #{&} {
      &.react-datepicker__day--today {
        color: #fff;
	background: $color-secondary-400 !important;
    }

  }
}