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>
);
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With