Clicking selected date will deselect it!

[gharabaghi]

Hello

Code

import { DayPicker } from "react-day-picker";

export function Start() {
  return (
    <DayPicker 
     .....
          selected={date ??: undefined}
           onSelect={(selectedDate: Date | undefined) => {
            if (selectedDate) {
              setDate(date);
            }
          }}
     .....
 />
  );
}

Expected Behavior

When i click a selected day, i want to show the state i gave to it via selected prop

Actual Behavior

When clicking on a selected date, it will be deselected even selected date in the state is filled.

[gpbl]

Hwy @gharabaghi does the required prop work for your case?

[gharabaghi]

No!
in fact not as i expect. because initially my date is null but after selecting a date by user, i want the date being un-deselectabe. user could just change the date.

[gharabaghi]

I really don't know why this issue is closed and converted to a discussion!
Having no day selected while selected value in the state is filled must be considered as a bug!

[gpbl]

I really don't know why this issue is closed and converted to a discussion!

It is because we need to discuss this before :) Let first align together to understand what's happening.

When clicking on a selected date, it will be deselected even selected date in the state is filled.

I think I get your use case: initially, no date is selected. User selects a date and it should not be able to unselect any date anymore. Is this the case?

I could get it working:
https://stackblitz.com/edit/react-day-picker-9-2332-f2kvq1?file=src%2FApp.tsx

The trick here is to create a new Date(date) to trigger the calendar to rerender it.

onSelect={(newDate: Date | undefined) => {
  if (newDate) {
    setDate(newDate);
  } else if (date) {
    // Since we don't allow unselect the day, we set the same date as the already selected one
    setDate(new Date(date)); // make sure it is a new date!
  } else {
    // do nothing
  }
}}

Sure this behavior is somehow unexpected: we could make the initially selected date optional, even if it is later required, so you wouldn't need to use the onSelect prop with that extra check.

[gharabaghi]

Thank you! i will try it tomorrow. for now i think it is the solution.