[Textfield] TS2322 with slotProps inputLabel

[sampain]

Steps to reproduce

Steps:

1. Using Textfield with shrink to true

<TextField
  slotProps={{
    inputLabel: { shrink: true },
  }}
/>

2. Build with TypeScript (with strict)

Returns

error TS2322: Type '{ shrink: true; } | { shrink: true; } | { id?: string | undefined; role?: AriaRole | undefined; form?: string | undefined; property?: string | undefined; key?: Key | null | undefined; ... 265 more ...; shrink: true; } | ... 7 more ... | { ...; }' is not assignable to type 'SlotProps<ElementType<InputLabelProps, keyof IntrinsicElements>, {}, BaseTextFieldProps> | undefined'.
  Object literal may only specify known properties, and 'shrink' does not exist in type '(Partial<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & { ...; }> & SlotCommonProps) | ... 5 more ... | (Partial<...> & SlotCommonProps)'.'.  

Current behavior

Error on build

Expected behavior

Suppose to build like
<TextField InputLabelProps={{ shrink: true }} />

Doc still suggest to use it this way even if InputLabelProps is deprecated: https://mui.com/material-ui/react-text-field/#shrink

Context

No response

Your environment

No response

Search keywords: TS2322 inputLabel slotProps Textfield

[sai6855]

Doc still suggest to use it this way even if InputLabelProps is deprecated

@sampain Opened PR to remove InputLabelProps and update it with slotProps.inputLabel #44634

[siriwatknp]

@sampain Can you share the repository? I cannot reproduce on my machine.

[sampain]

@sampain Can you share the repository? I cannot reproduce on my machine.

I cannot share the repository, but I just found out that it's the spread operator in my custom Textfield componant that is causing the issue.
Here's a simplified version of it:

export function CustomTextField(props: TextFieldProps) {
  const { slotProps = {}, ...otherProps } = props;
  const TextFieldElement = (
    <TextField
      slotProps={{
        inputLabel: { shrink: true, ...slotProps.inputLabel },
        ...slotProps,
      }}
      {...otherProps}
    />
  );
  return TextFieldElement;
}

I also have the same issue if I try to do something like this:

export function CustomTextField(props: TextFieldProps) {
  const { slotProps = {}, ...otherProps } = props;
  const { input, ...otherSlotPropss } = slotProps;
  const { shrink } = input;
}

Casting it like this seems to work, would that be the official way of doing this?

        inputLabel: {
          shrink: true,
          ...slotProps.inputLabel,
        } as Partial<InputLabelProps>,

It seems specific to inputLabel however, with something like this, only inputLabel cause an error:

export function CustomTextField(props: TextFieldProps) {
  const { slotProps = {}, ...otherProps } = props;
  const TextFieldElement = (
    <TextField
      slotProps={{
        inputLabel: { error: true, ...slotProps.inputLabel },
        formHelperText: { error: true, ...slotProps.formHelperText },
        htmlInput: { error: true, ...slotProps.htmlInput },
        input: { error: true, ...slotProps.input },
      }}
      {...otherProps}
    />
  );
  return TextFieldElement;
}

[metalRudge]

Im having the same problem but without using the spread operator, the only way I get it to work is by using the InputLabelprops which is deprecated. Is there any other way to alter the animation states of the Input labels ?

[siriwatknp]

I think it's because slotProps.inputLabel can be a function, that's why you cannot spread it. @DiegoAndai I think we might need to expose a utility for this. This use cases (composing Material UI component) are common.

Something like:

import { mergeSlotProps } from '@mui/material/utils';

export function CustomTextField(props: TextFieldProps) {
  const { slotProps = {}, ...otherProps } = props;
  const TextFieldElement = (
    <TextField
      slotProps={{
        inputLabel: mergeSlotProps({ error: true }, slotProps.inputLabel),
        formHelperText: mergeSlotProps({ error: true }, slotProps.formHelperText),
        htmlInput: mergeSlotProps({ error: true }, slotProps.htmlInput),
        input: mergeSlotProps({ error: true }, slotProps.input),
      }}
      {...otherProps}
    />
  );
  return TextFieldElement;
}

The mergeSlotProps will handle the types and function.