React - Material UI - TextField controlled input with custom input component with custom props

Question

How can I pass custom props to the inputComponent?

For example, I have a MuiTextField component:

const CustomerSocialMask = React.forwardRef<HTMLElement, CustomProps>(
  function CustomerSocialMask(props, ref: any) {
    // deploy test
    const { onChange, ...other } = props;
    return (
      <IMaskInput
        {...other}
        mask="000.000.000-00"
        definitions={{
          '#': /[1-9]/,
        }}
        inputRef={ref}
        onAccept={(value: any) =>
          onChange({ target: { name: props.name, value } })
        }
        overwrite={false}
      />
    );
  },
);

<MuiTextField
  sx={{
    '& input[type=number]': {
      MozAppearance: 'textfield',
    },
    '& input[type=number]::-webkit-outer-spin-button': {
      WebkitAppearance: 'none',
      margin: 0,
    },
    '& input[type=number]::-webkit-inner-spin-button': {
      WebkitAppearance: 'none',
      margin: 0,
    },
  }}
  variant="standard"
  multiline={data.fieldType === FieldType.LONG_TEXT}
  placeholder={data.settings.placeholder}
  fullWidth
  type={inputType}
  InputProps={{
    startAdornment: prefix && (
      <InputAdornment position="start">
        <Typography color="text.primary">{prefix}</Typography>
      </InputAdornment>
    ),
    endAdornment: suffix && (
      <InputAdornment position="start">
        <Typography color="text.primary">{suffix}</Typography>
      </InputAdornment>
    ),
    inputComponent: CustomerSocialMask,
  }}
  name={name}
  onChange={
    (data.settings as ShortTextSettings).valueType ===
      ValueType.CURRENCY || path === PersonalDetail.PHONE
      ? onChange
      : handleChange
  }
  onBlur={handleBlurWithFix}
  value={valueAdjusted}
  error={!!error}
  helperText={error}
/>

When I try to pass custom props to the inputComponent like:

inputComponent: <CustomerSocialMask customProp={something}/>,

I get the following error:

Failed prop type: Invalid prop `inputComponent` of type `object` supplied to `ForwardRef(Input2)`, expected a single ReactElement type.

So I must only provide refs to the inputComponent, but I can't pass external data / props to the forwardRef component. I want to use a customProp inside the CustomerSocialMask component por example. How would I do that? Couldn't find anything on the docs.

Answer 1

Material UI TextField provides a few 'Props' style attributes to apply configuration to the child components that are combined to make the input.

Two of note are:

• InputProps: This provides properties to the Material UI component that is selected based on the variant property i.e. OutlinedInput, FilledInput, etc.
• inputProps: This provides properties to the underlying input which is being used, by default this is an input.

When using InputProps.inputComponent the underlying input is replaced with the provided component, this allows you to use inputProps to pass extra properties to configure the custom input.

Example:

<TextField
    InputProps={{
        inputComponent: CustomerSocialMask,
    }}
    inputProps={{
        customProp: something
    }}
/>

Answer 2

The solution seems to be very close to what you are doing, you just need to pass a function to inputComponent.

inputComponent: (props) => <CustomerSocialMask {...props} myCustomPropName={doSomething} />

Answer 3

Hello MUITextfield inputProps attribute can accept only the types with a normal input tag can accept (varies depending on the type), however you can use the MUI Input component to pass with custom component to use, and there the inputProps is available so you can pass the props of your custom field.

I created a quick draft in this Sandbox: https://codesandbox.io/s/react-mui-using-a-custom-component-with-input-compnent-zysvji?file=/src/App.tsx

I hope this helps. E