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.

Is this not what the `inputProps` attribute is for (the lower case 'i' attribute not the upper case `InputProps`)? You are replacing the default input component and the component is passed all MUI calculated props + all user defined props from `inputProps`. — Jacob Smit, Aug 29 '22 at 04:40
Turns out you were right, if I pass some arbitrary prop to lowercase inputProps I can access it inside the inputComponent in uppercase InputProps. Thank you very much sir! That wasn't obvious at all. — Ericson Willians, Aug 29 '22 at 11:29

score 4 · Accepted Answer · answered Sep 04 '22 at 21:28

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
    }}
/>

score 1 · Answer 2 · answered Aug 29 '22 at 14:33

1

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} />

answered Aug 29 '22 at 14:33

Marcelo KortKamp

52
2

This gives me `Warning: Failed prop type: Invalid prop 'inputComponent' supplied to 'ForwardRef(InputBase2)'. Expected an element type that can hold a ref. Did you accidentally provide a plain function component instead?`. Why? – Stefan Haberl Apr 17 '23 at 07:38

score 0 · Answer 3 · answered Sep 04 '22 at 14:13

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

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

3 Answers3