question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript error with KeyboardDatePicker

See original GitHub issue

!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<KeyboardDateInputProps, “id” | “required” | “helperText” | “disabled” | “name” | “error” | “label” | “select” | “style” | “title” | “mask” | “fullWidth” | “defaultValue” | … 270 more … | “rifmFormatter”>’: 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}
        />

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
ikesaucommented, Sep 20, 2019

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.

1reaction
dmtrKovalenkocommented, Sep 25, 2019

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. 😦

Read more comments on GitHub >

github_iconTop Results From Across the Web

No results found

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found