CODEWITHSUNDEEP
javascriptreactjsmaterial-uiimaskjs
Ericson Willians
Ericson Willians

Reputation: 7845

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

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.

Upvotes: 4

Views: 4885

Answers (3)

Jacob Smit
Jacob Smit

Reputation: 2379

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

Upvotes: 5

Efra
Efra

Reputation: 11

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

Upvotes: 0

Marcelo KortKamp
Marcelo KortKamp

Reputation: 50

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

Upvotes: 1

Related Questions