Hacker0x01 / react-datepicker

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

Disabled date is getting auto-selected when switching to the other view like next month or year #4933

Open balajis-qb opened 1 week ago

balajis-qb commented 1 week ago

Describe the bug In our DatePicker, once we select a date and switch to the next or previous month/year view, by default the auto-focus has been set to the same date or month, which will help the user from continue the focus from the same date or month using keyboard keys. But in the next view if the same date or month is the part of a disabled dates (using excludeDate or maxDate or minDate or some other props like that), in that case the keyboard focus has been auto-set to those disabled dates, which shouldn't be the case I think, because when we normally use keyboard arrows to navigate between the available dates we won't to be able to focus on the disabled dates.

To Reproduce Steps to reproduce the behavior:

  1. Try the following code
    () => {
    const [startDate, setStartDate] = useState(new Date("2024-05-08"));
    return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      excludeDates={[new Date("2024-04-08")]}
    />
    );
    };
  2. Here I selected the 08th May, 2024 by default
  3. Click the date picker input & switch to the previous month, where I excluded the same date of April
  4. But you can notice, the default highlight style is applied for that disabled date also

This issue can be recreated in the month view or quarter year view or even in the year view (Here in the year view, we track the same position instead of the actual date while switching between next/previous view. So trying to exclude the year of the same position, we can recreate it in the year view)

In the following example of the year picker, I selected 2023 (year located in the 3rd row, 1st col) and when I click the next arrow (where I disable the year in the same location), I can still see it's auto selected. Check the attached screenshots and the code for more details

() => {
  const [startDate, setStartDate] = useState(new Date("2023-04-08"));
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showYearPicker
      excludeDates={[new Date("2035-06-24")]}
      dateFormat="yyyy"
    />
  );
};

image image

balajis-qb commented 1 week ago

Hi @martijnrusschen,

Please assign this issue to me. I'll work on this.