Bug: Wrong type for onSelect arguments when passing typed mode property

[VitaliyR]

Bug description

Bug with types for the react-day-picker

To reproduce

https://codesandbox.io/s/react-daypicker-forked-wdgtko?file=/src/App.tsx

Steps

Write the code

Expected behavior

For this case argument date should have type Date which comes from SelectSingleEventHandler

Screenshots

Additional context

I assume this happens as DayPickerDefaultProps has dynamic mode usage which breaks union, but not exactly sure.

[gpbl]

Hey thanks for reporting this, I see some issues as well but I'm not sure if they are related to the discriminated union. Will investigate...

[gpbl]

This should fix it: #1571

[VitaliyR]

@gpbl sadly 8.3.1 not helps in the provided codesandbox - see the link above, still erroring with same any error, so types are not picked up properly

[gpbl]

@VitaliyR thanks for the feedback! Uhm it does work here - could you wait the Sandbox to download the dependencies?

[VitaliyR]

Indeed. I've updated an attributes to more real life example when they are coming from the props.
Weirdly mode isn't picked up if it comes from the Props. Perhaps you know why is that happening?

[gpbl]

@VitaliyR there, the typescript compiler cannot infer the value of props.mode, thus the type error. You want to write some conditionals, to help the compiler understand what is props.mode and get the correct type:

if (props.mode === 'single')
 <DayPicker mode={props.mode} onSelect={...} />

[VitaliyR]

Yeah, could not fight anylonger with TS and went with if battery :)
But original fix still fixed some things, so thanks a lot for it!

[bartlomiej-bykowy-jt]

Hi! I'm not opening new issue because I think it can be somehow related with this one 🙂

So, after updating to 8.3.1 this issue appeared:

mode and selectedDate comes from props. Their types are defined as follows:

mode?: 'single' | 'multiple' | 'range';
selectedDate: DatesType

(and DatesType: Date | Date[] | DateRange | undefined, where DateRange is imported from `react-day-picker)

At this point I ran out of ideas how to resolve this issue. The only solution that worked, was something like this:

{ mode === 'single' && <DayPicker mode='single' selected={selectedDate as Date | undefined} {...otherProps} /> }
{ mode === 'multiple' && <DayPicker mode='multiple' selected={selectedDate as Date[] | undefined} {...otherProps} /> }
{ mode === 'range' && <DayPicker mode='range' selected={selectedDate as DateRange | undefined} {...otherProps} /> }

but to be hones it doesn't look too clean.

Maybe you would know what is the issue here and if there is a better way to resolve it than the one I showed above?

Thanks in advance 😃

[gpbl]

Thanks for the report, definitely it shouldn't work this way! Will investigate...

[owaisahmed5300]

Any news?

[gpbl]

To close this discussion, you should use type guards, e.g.

import { DayPicker, type PropsMulti, type PropsSingle } from "react-day-picker";
import "react-day-picker/dist/style.css";

type AppProps = PropsSingle | PropsMulti;

// Type guard to check if props is for single mode
function isSingleMode(props: AppProps): props is PropsSingle {
  return props.mode === "single";
}

export default function App(props: AppProps) {
  return isSingleMode(props) ? (
    <DayPicker
      mode="single"
      selected={props.selected}
      showWeekNumber
      onSelect={props.onSelect}
    />
  ) : (
    <DayPicker
      mode="multiple"
      selected={props.selected}
      showWeekNumber
      onSelect={props.onSelect}
    />
  );
}

[andreasvirkus]

What if in both scenarios there's also an optional required prop, should that result in a 4-branch rendering condition now? This doesn't seem like optimal DX or maybe I'm missing something... 🤔

[gpbl]

@andreasvirkus Yeah the DX there is not that nice. It is really challenging to get these types right. They are defined in props.ts.

Feel free to suggest any improvements if you have better ideas - I've tried many alternatives without luck - this is the best solution I could find.