gpbl / react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.

Home Page:https://daypicker.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug: Documentation: Input Fields Example

gtonussi opened this issue · comments

Bug description

On documentation, on example for Date Picker Dialog with single select, the function "handleDaySelect" has an incorrect interface that causes a typescript error when assigning it to "onSelect" prop on DayPicker component.

To reproduce

1- Copy and paste this code on a React project with dependencies for React DayPicker installed:
https://react-day-picker.js.org/guides/input-fields#example-date-picker-dialog

2- You will notice the following error on "onSelect":

Type '(date: Date) => void' is not assignable to type 'SelectSingleEventHandler'.

Expected behavior

The code should compile with no type errors.

Suggested fix

I kindly suggest that the type of "handleDaySelect" function to be "SelectSingleEventHandler" and that the "date" parameter receives a "Date | undefined". That solved the error for me:

const handleDateSelect: SelectSingleEventHandler = (date: Date | undefined) => {
    setSelected(date);
    if (date) {
      setInputValue(format(date, 'y-MM-dd'));
      closePopper();
    } else {
      setInputValue('');
    }
}

The fix is basically use the same type as Range example for that function, but with correct EventHandler.

If it is a correct fix and doc website is open to contribute, I would be glad to do it.

Hi @gtonussi. nice find. Yes, your suggestion would fix it!

However, this type error should have been caught by our type-check. I suspect we are not enabling "strict" mode in our website. Let me fix it first!