extending mui (material ui) date picker component typscript issue

Viewed 702

I try to extend the muiv5 date picker component like this

I named it DSDesktopDatePicker

codesandbox link https://codesandbox.io/s/materialuipickers-material-demo-forked-4oofbx?file=/demo.tsx

import DesktopDatePicker, {
  DesktopDatePickerProps,
} from "@mui/lab/DesktopDatePicker";

export const DSDesktopDatePicker = (props: DesktopDatePickerProps) => {
  return <DesktopDatePicker {...props} />;
};

and I will use it like this

export const Debug = () => {
  return (
    <DSDesktopDatePicker
      value={new Date()}
      onChange={evt => console.log(evt)}
    />
  );
};

From what I understand and read. how mui will handle the type of the value on the onChange props is the component will read what type of the value passed to value props.

In this case new Date()

attachment of Desktop Date Picker uses

If we pass a string on value props. the first param of onChange props will also be a string type

DesktopDatePicker with value stringz

My issue is

I extend the date picker component and spread all the props to my new component, When I try to use it, the component fails to read what type of the value passed to value props and the onChange props will also fail to read the value types.

in this case, the types of the value will remain as unknown

DSDesktopDatePicker unknown value

What I expected

is that when I extend the component it will still succeed to read the value and all the props still work the same as the base component DesktopDatePicker

What I have tried

I try to look at the documentation but still couldn't find anything related until now.

0 Answers
Related