selectsMultiple - Type 'boolean | undefined' is not assignable to type 'true'.

[robinmartensss]

Describe the bug
The bug that was fixed for selectsRange in the last release persist for selectsMultiple, I checked the changes and saw adjustments to the selectsMultiple prop but when you spread DatePickerProps the issue persists.

To Reproduce
Steps to reproduce the behavior:

1. Send props to component - datePickerProps?: Omit<DatePickerProps, 'onChange'>
2. Spread props to Datepicker component - {...datePickerProps}
3. Error is :

Type '{ className: string; children?: ReactNode; date?: Date | undefined; minDate?: Date | undefined; maxDate?: Date | undefined; scrollableYearDropdown?: boolean | undefined; ... 177 more ...; onChange: (date: Date | ... 1 more ... | null) => void; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes & ((Pick<Readonly<Omit<Omit<YearDropdownProps, "date" | ... 3 more ... | "maxDate"> & ... 9 more ... & { ...; }, "className" | ... 18 more ... | "onTimeChange"> & ... 4 more ... & { ...; }>, "className" | ... 137 more ... | "formatMultipleDates"> & InexactP...'.
Type '{ className: string; children?: ReactNode; date?: Date | undefined; minDate?: Date | undefined; maxDate?: Date | undefined; scrollableYearDropdown?: boolean | undefined; ... 177 more ...; onChange: (date: Date | ... 1 more ... | null) => void; }' is not assignable to type 'Pick<Readonly<Omit<Omit<YearDropdownProps, "date" | "onChange" | "year" | "minDate" | "maxDate"> & Omit<MonthDropdownProps, "onChange" | "month"> & ... 10 more ... & { ...; }, "className" | ... 18 more ... | "onTimeChange"> & ... 4 more ... & { ...; }>, "className" | ... 137 more ... | "formatMultipleDates">'.
Types of property 'selectsMultiple' are incompatible.
Type 'boolean | undefined' is not assignable to type 'true'.
Type 'undefined' is not assignable to type 'true'.

Expected behavior
Expectation is that spreading of the props works the same as all the rest.

Screenshots

Additional context

4: My temporaty fix is = const extraParameters = useMemo(() => { const parameters: any = {} if (selectsMultiple) { parameters.selectsMultiple = selectsMultiple } return parameters }, [selectsMultiple])

5. Spread this function to the Datepicker component = {...extraParameters}

[martijnrusschen]

Update: The fix for this issue (#6156 / commit 3a82fd1) introduced a regression where TypeScript could no longer infer the onChange parameter type for the default single-date case (see #6202).

We're reverting the optional discriminators in #6205 to restore type inference for the common case.

Workaround for wrapper components

If you have a wrapper component that spreads props and encounters type errors, you can use a type assertion:

type WrapperProps = Omit<DatePickerProps, 'onChange'> & {
  onChange: (date: Date | null) => void;
};

function MyDatePicker(props: WrapperProps) {
  // Use type assertion when spreading
  return <DatePicker {...(props as DatePickerProps)} />;
}

Alternatively, explicitly set the discriminator props:

function MyDatePicker({ selectsRange, selectsMultiple, ...props }: WrapperProps) {
  return (
    <DatePicker
      {...props}
      selectsRange={selectsRange as true | undefined}
      selectsMultiple={selectsMultiple as true | undefined}
    />
  );
}

Apologies for the inconvenience - the trade-off favors the more common use case (basic DatePicker with type inference) over the wrapper component pattern.

[xec]

The cause seems to be that the default Omit<> implementation in TypeScript destroys discriminating unions. microsoft/TypeScript#31501

An alternative solution is to copy the OmitUnion<> as used internally in react-datepicker

react-datepicker/src/index.tsx

Line 115 in 644f2f5

type OmitUnion<T, K extends keyof any> = T extends any ? Omit<T, K> : never;

type OmitUnion<T, K extends keyof any> = T extends any ? Omit<T, K> : never;

Then you should hopefully be able to spread props as expected:

1. Send props to component - datePickerProps?: OmitUnion<DatePickerProps, 'onChange'>
2. Spread props to Datepicker component - {...datePickerProps}