Typescript error when pass "size" prop with custom MUI Textfield

[Skladnayazebra]

Hello!

I`m using NumberFormat + Material UI + TypeScript

When i give customInput={TextField} and size={"small"}, I got error from TypeScript:

No overload matches this call.
Overload 1 of 2, '(props: Readonly<NumberFormatProps>): NumberFormat', gave the following error.
    Type 'string' is not assignable to type 'number'.
  Overload 2 of 2, '(props: NumberFormatProps, context?: any): NumberFormat', gave the following error.
    Type 'string' is not assignable to type 'number'.  TS2769

Here`s my component:

<NumberFormat
    format={'############'}
    mask={'_'}
    onValueChange={(values: NumberFormatValues) => {
        setValue('identification.inn', values.value)
    }}
    customInput={TextField}
    size={"small"}
    label={'ИНН'}
    variant="outlined"
    error={Boolean(errors.identification?.inn)}
    helperText={'12 цифр'}
    classes={{root: styles.textField}}
/>

If I remove size prop, everything works fine and TextField recieve all other props (label, helperText, etc.)

[S3ak]

I have the same issue. How did you resolve?

[S3ak]

Hard workaround is to ignore the props type checking

// @ts-ignore
size="small

[j0n4t]

Another workaround is to make a react function with the needed props:
const SmallTextField = (props: Object) => <TextField size='small' {...props} />

And then, passing it to customInput:
<NumberFormat customInput={SmallTextField} />

[dylancrockett]

Since this still has not been fixed I figured I would share the solution I came up with in a project I am currently working on.

Here it is:

type NumberTextFieldProps = Omit<NumberFormatPropsBase, "size"> & Omit<TextFieldProps, "value" | "defaultValue" | "ref" | "type">;

const TextFieldMiddleware = (params: TextFieldProps & { textFieldSize?: 'small' | 'medium' }) => {
    //destructure params to take out textFieldSize
    const { textFieldSize, ...otherParams } = params;

    return <TextField {...otherParams} size={textFieldSize}/>
};
  
const NumberTextField = (props: NumberTextFieldProps) => {
    const { size, ...otherProps } = props;

    return (
        <NumberFormat
            customInput={TextFieldMiddleware}
            //map the size prop to textFieldSize so it can be passed correctly to the TextFieldMiddleware component
            textFieldSize={size}
            {...otherProps}
        />
    );
};

export default NumberTextField;

The NumberTextField can be used in place of the NumberFormat component and will accept all props for both the NumberFormat component & TextField component, and it will map the 'size' param correctly to the TextField component.

[dev-seahouse]

any updates on this issue?