Material-ui-pickers: Typescript error with KeyboardDatePicker

[kkawett]

!https://imgflip.com/i/3av1tk

Environment

| Tech | Version |
| -------------------- | ------- |
| @material-ui/pickers | 3.2.6 |
| material-ui | 4.4.2 |
| React | 16.8.6 |
| Browser | Brave(Chrome)|
| Peer library | | |

Steps to reproduce

Use KeyboardDatePicker component, with props from demo for instance in a TSX file (using typescript then)

Expected behavior

No compilation error

Actual behavior

Get this compilation error:
Error:(41, 10) TS2740: Type '{ clearable: true; fullWidth: true; format: string; views: DatePickerView[]; label: Element; value: any; inputVariant: "outlined" | "standard" | "filled"; onChange: (date: Moment) => void; ... 12 more ...; disabled: boolean; }' is missing the following properties from type 'Pick': style, defaultValue, className, innerRef, and 3 more.

Example

Here are the props I use :

<KeyboardDatePicker
          clearable
          fullWidth
          format={format.printFormat}
          views={format.view}
          label={id === undefined ? null : <FormattedMessage id={id} />}
          value={formattedValue}
          inputVariant={variant}
          onChange={date => onChange(date)}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          InputAdornmentProps={{
            position: 'start',
          }}
          required={required}
          invalidLabel=""
          cancelLabel={<FormattedMessage id="form.cancel" />}
          clearLabel={<FormattedMessage id="form.raz" />}
          minDate={minDate}
          error={!meta.valid && (meta.touched || submitted)}
          InputLabelProps={{
            shrink: (formattedValue !== null || isFocused),
            className: (formattedValue === null && !isFocused) ? classes.dateLabelBase : null,
          }}
          InputProps={{
            endAdornment: (helperText !== undefined
              ? (
                <InputAdornment position="end">
                  <IconButton
                    onClick={() => setShowHelp(!showHelp)}
                    className={classes.formIcon}
                    tabIndex={-1}
                  >
                    {showHelp ? <Help /> : <HelpOutline />}
                  </IconButton>
                </InputAdornment>
              ) : null
            ),
          }}
          helperText={!meta.valid && (meta.touched || submitted) ? <FormattedMessage id={meta.error} {...{ style: { color: 'red' } }} /> : null}
          disabled={disabled}
        />

[lubkooleskiv]

Environment

@material-ui/pickers | 3.2.5
material-ui | 4.4.0
React | 16.8.6
Browser | Chrome

Steps to reproduce

Use KeyboardDatePicker component and use 'yarn' to install the dependencies.
I don't meet a such error with 'npm install'.

Actual behavior

Type '{ autoOk: true; variant: "inline"; format: string | undefined; emptyLabel: string; inputVariant: "outlined"; label: string | undefined; views: ("month" | "year" | "date")[]; value: Moment | null; ... 4
more ...; onOpen: () => void | undefined; }' is missing the following properties from type 'Pick<KeyboardDateInputProps, "name" | "label" | "onClick" | "children" | "ref" | "select" | "style" | "title" | "mask" | "key" | "className" | "color" | "id" | "lang" | "type" | ... 269 more ... | "rifmFormatter">': ref, style, className, rows, and 2 more. 

Example

<KeyboardDatePicker autoOk variant="inline" format={format} emptyLabel={emptyLabel} inputVariant="outlined" label={noFloatLabel ? '' : label} views={views} value={fieldValue ? moment(fieldValue, format) : null} InputAdornmentProps={{ position: 'end' }} onChange={(date) => date && setFieldValue && setFieldValue(name, date.format(format))} onBlur={onBlur} onFocus={() => onClick && onClick(name)} onOpen={() => onClick && onClick(name)}

[kkawett]

Indeed, I use yarn.
Thanks for the code formatting btw.

I digged a little bit by taking a look at the type files.
the interface KeyboardDateInputProps has also an error :
TS2430: Interface 'KeyboardDateInputProps' incorrectly extends interface 'Pick<TextFieldProps, "fullWidth" | "defaultValue" | "manifest" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | ... 266 more ... | "type">'.   Property 'InputProps' is optional in type 'KeyboardDateInputProps' but required in type 'Pick<TextFieldProps, "fullWidth" | "defaultValue" | "manifest" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | ... 266 more ... | "type">'.

Could it be related to TextFieldProps from material UI ?

[ikesau]

The props that are required for me are: onBlur, onFocus, className, ref, innerRef, rows, rowsMax, variant, and style. Providing those (even with useless values,) allows me to compile.

[engelkes-finstreet]

I have the same problem with yarn and material-ui/core.
Adding the properties that @ikesau mentioned and inputRef lets me render the DatePicker.

[marcheneli]

I updated to the new version of typescript and problem was solved. The issue was in old version of typescript in Pick, it changes optional properties to required.

[dmtrKovalenko]

Indeed a problem is in typescript version 🤦‍♂
We added this custom Omit because accidentially updated to the new ts version which already have Omit included. So I suppose we need a new minor release requiring update to the minor typescript version. :(