Keyboard navigation not working as expected when includeDates is set.

[YakinRojinegro]

Describe the bug When setting the includeDates with an array of values is not disabling keyboard navigation for the "disabled" values. We have some custom CSS.

To Reproduce CSS:

.react-datepicker {
      border: none;

      .react-datepicker__day,
      .react-datepicker__day-name {
        margin: 0 20px 0 0;
        padding: 6px;
        height: 32px;
        width: 32px;
        box-sizing: border-box;
        text-align: center;

        &:focus-visible {
          outline: 2px solid #CCC;
        }
      }

      .react-datepicker__day--disabled {
        background: transparent;
        color: #d1d1d1;
      }

      .react-datepicker__day--disabled:hover {
        background-color: transparent;
        cursor: not-allowed;
        color: #d1d1d1;
      }
}

JSX

// Add days function for sample 
Date.prototype.addDays = function (days: number) {
  const date = new Date(this.valueOf());
  date.setDate(date.getDate() + days);
  return date;
};

// Component
() => {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const arrTest = [
    new Date().addDays(4),
    new Date().addDays(5),
    new Date().addDays(6),
    new Date().addDays(8),
    new Date().addDays(9),
  ];

  return (
  <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      includeDates={arrTest}
      inline
      minDate={arrTest[0]}
      />
  )
}

Steps

1. Run the code above with any FC react component syntax.
2. Tab into the date-picker
3. Start navigating through items with the arrow keys

Expected behavior The navigation should skip the element that is not active in the array meaning the day 7 shouldn't be focus

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser: All
• Version All

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context I'm following the guide provided here. package.json version: "@types/react-datepicker": "^4.3.2", "react-datepicker": "^4.8.0",

[ezParth]

disabledKeyboardNavigation

Add this line inside <DatePicker/> component to skip disabled dates when navigating with the keyboard

[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.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.