Typescript error with KeyboardDatePicker
See original GitHub issueEnvironment
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:
- Created 4 years ago
- Reactions:3
- Comments:6 (1 by maintainers)
Top Results From Across the Web
No results found
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The props that are required for me are:
onBlur
,onFocus
,className
,ref
,innerRef
,rows
,rowsMax
,variant
, andstyle
. Providing those (even with useless values,) allows me to compile.Indeed a problem is in typescript version 🤦♂ We added this custom
Omit
because accidentially updated to the new ts version which already haveOmit
included. So I suppose we need a new minor release requiring update to the minor typescript version. 😦