Skip to content

8.3.0 broken --in-selecting-range #5599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
martintyler opened this issue Apr 24, 2025 · 1 comment · Fixed by #5619 · May be fixed by qburst/react-datepicker-3#51
Closed

8.3.0 broken --in-selecting-range #5599

martintyler opened this issue Apr 24, 2025 · 1 comment · Fixed by #5619 · May be fixed by qburst/react-datepicker-3#51

Comments

@martintyler
Copy link

Describe the bug
See issue: #5502
and PR: #5503

This has broken the --in-selecting-range styling for endDate pickers when hovering on a date when startDate and endDate are already set.

To Reproduce

Copied from linked issue:

() => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  return (
    <>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        selectsStart
        startDate={startDate}
        endDate={endDate}
      />
      <DatePicker
        selected={endDate}
        onChange={(date) => setEndDate(date)}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
      />
    </>
  );
};
  • You have start date 1st march, and end date 31st march set.
  • Open the start picker and hover over a date in the middle, and you get the --in-selecting-range styling for the dates after the one you are hovering on (as expected)
  • Open the end picker and hover over a date in the middle, and you do not get the --in-selecting-range styling. You should get that class on the dates before the one you are hovering on - as you did in version 8.2.1

Expected behavior

I expect the --in-selecting-range class to be added to all dates between the start date and the date I am hovering on in the end picker

This should happen if I am hovering before the end date, or after it (if the end date is earlier in the month)

Screenshots

As described above, start and end dates set to start and end of march..

  1. Hovering in start picker shows --in-selecting-range styling

Image

  1. Hovering in end picker does not show --in-selecting-range styling (i'm hovering on a date in the middle here)

Image

Desktop (please complete the following information):

  • OS: MacOS 15.3.2
  • Browser: Chrome
  • Version: 135

Other comments

The linked issue has not been fixed correctly - I believe the issue was if you had start date set to 1st March, end date sent to 15th March then navigated to April, with no hovering it would have --in-selecting-range class on all dates up to 15th APRIL - I can see this happening on 8.2.1 and not happening on 8.3.0.

It is adding the --keyboard-selected class to the 15th April, then the 15th May etc as you move forward each month - I assume this part is desired behaviour (eg you can navigate forward a month and hit enter, you get the same day in the new month that was selected in the previous month)

@balajis-qb
Copy link
Contributor

balajis-qb commented May 10, 2025

Yes, actually as we pre-select the selected day programmatically on each month change only it's happening. I'll work on it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants