Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is excludScrollbar property required for react-datepicker?

I want to make a wrapper for a component. To pass all its properties I use DatePickerProps from the react-datepicker import. Why is the excludeScrollbar property required?

https://codesandbox.io/p/sandbox/datepickerprops-92df8r?file=%2Fsrc%2FApp.tsx

DatePickerCommon.tsx

import DatePicker, { DatePickerProps } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

type Props = DatePickerProps & {
  label: string;
};

export const DatePickerComponent = ({ label, ...datePickerProps }: Props) => {
  return (
    <label>
      <span>{label}</span>
      <DatePicker {...datePickerProps} />
    </label>
  );
};

App.tsx

import "./styles.css";
import { DatePickerComponent } from "./components/DatePickerCommon";
import { useState } from "react";

export default function App() {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  return (
    <div className="App">
      <DatePickerComponent
        excludeScrollbar={false} //additional props??
        label="Date"
        onChange={setStartDate}
        selected={startDate}
        onSelect={setStartDate}
      />
    </div>
  );
}
like image 651
anokhindev Avatar asked Mar 04 '26 13:03

anokhindev


1 Answers

excludeScrollbar type is picked from AdditionalProps

Pick<AdditionalProps, "excludeScrollbar"> &

here https://github.com/Hacker0x01/react-datepicker/blob/main/src/index.tsx

AdditionalProps is an interface that extends ConfigObject

export interface AdditionalProps extends ConfigObject {

And ConfigObject have excludeScrollbar that should not be required

export interface ConfigObject {
    handleClickOutside?: HandleClickOutside<any>["handleClickOutside"] | undefined;
    excludeScrollbar?: boolean | undefined;
}

here https://www.npmjs.com/package/@types/react-onclickoutside

But for some reason this does not work...

It might have something to do with Pick and chained types/interfaces but couldn't figure out what, but shared my investigations if someone can continue from here...

Tried to find issues related to this in typescript opened issues: https://github.com/microsoft/TypeScript/issues?q=is%3Aissue+%22but+required+in+type%22+Pick+is%3Aopen

closed issues: https://github.com/microsoft/TypeScript/issues?q=is%3Aissue+%22but+required+in+type%22+Pick+is%3Aclosed

Could this rescheduled issue affect here? https://github.com/microsoft/TypeScript/issues/52096

like image 105
SinunHenkka Avatar answered Mar 07 '26 04:03

SinunHenkka