showMonthYearPicker and showYearPicker have keyboard-select css class on not selected item

[Donorlin]

Describe the bug Month and year pickers have react-datepicker__month-text--keyboard-selected CSS class. Since keyboard navigation is not supported (or not working) for these pickers, picked month, year should not have this CSS class.

The problem is it messes with the stylings of the selected month (year).

To Reproduce react and react-dom: 16.14.0 react-datepicker: 4.6.0

Use this example:

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat="MM/yyyy"
      showMonthYearPicker // or showYearPicker 
    />
  );
};

1. Select February in 2022
   1. selected div has react-datepicker__month--selected react-datepicker__month-text--keyboard-selected classes which are somewhat correct even though keyboard navigation does not work with year or month pickers
2. Go to the previous year
3. February in 2021 also is highlighted as selected
   1. div has react-datepicker__month-text--keyboard-selected which messes with styles.

Same thing happens in year picker but with their respective CSS classes.

Expected behavior Since year and month pickers do not support keyboard navigation, they should not use keyboard-navigation styles. And if they should support keyboard navigation in the future let the disabledKeyboardNavigation property dictate whether keyboard navigation CSS classes are used for styling.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[KrabDr]

Update

[sasha1107]

I am experiencing the same issue even in v6.9.0. In which version was it resolved?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.