Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React
https://reactdatepicker.com/
MIT License
7.89k stars 2.23k forks source link

Keyboard navigation not working as expected when includeDates is set. #4850

Open YakinRojinegro opened 1 month ago

YakinRojinegro commented 1 month ago

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

image

Desktop (please complete the following information):

Smartphone (please complete the following information):

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