Cannot use react-input-mask with a children component in React

user_11453467 0
Viewed 1999

I want to mask a Material UI TextField, and reading some solutions on internet I got this code:

       <InputMask
          mask="(0)999 999 99 99"
          value={phone}
          disabled={false}
          onChange={handleChange}
        >
          {(inputProps: Props & TextFieldProps) => (
            <TextField
              {...inputProps}
              type="tel"
              label={t("addDriverModal.phone")}
            />
          )}
        </InputMask>

But it gets me this error:

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): ReactInputMask', gave the following error.
    Type '(inputProps: Props & TextFieldProps) => JSX.Element' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: Props, context: any): ReactInputMask', gave the following error.
    Type '(inputProps: Props & TextFieldProps) => JSX.Element' is not assignable to type 'ReactNode'.ts(2769)

So I cannot pass a TextField as a children for InputMask component.

I also tried this solution:

        <InputMask
          mask="(0)999 999 99 99"
          value={phone}
          disabled={false}
          onChange={handleChange}
        >
          <TextField
            id="outlined-basic"
            label="Teléfono"
            variant="outlined"
            style={{
              border: "2px solid #fff",
              borderRadius: "4px",
              color: "white",
            }}
            InputLabelProps={{ style: { color: "white" } }}
            sx={{ input: { color: "white" } }}
          />
        </InputMask>

But when I start the app, in console displays this error:

Uncaught Invariant Violation: react-input-mask: children must be a function

So really I cannot use any solution for masking my MUI TextField. I'm using this versions:

   "react": "^18.1.0",
   "react-dom": "^18.1.0",
   "react-input-mask": "^2.0.4",
   "@types/react": "^18.0.0",
   "@types/react-dom": "^18.0.0",
   "@types/react-input-mask": "^3.0.1",

And I'm using Typescript, and functional components.

material-ui reactjs javascript
3 Answers

The type definitions package you are using does not correspond to the version of the package. You should either:

  • Downgrade @types/react-input-mask to 2.0.4 to match the package
  • Or upgrade react-input-mask to version 3.0.0-alpha.2 to match the typing.
user_168877770

I had the same problem and upgrading react-input-mask to version 3.0.0-alpha.2 resolve the problem.

user_118091620

I have the same issue, it worked for me to update react-input-mask to version 3.0.0-alpha.2.

Its my code finally:

<FormControl fullWidth={false} sx={{ width: '290px', mb: 6 }}>
        <Controller
          name='cnpj'
          control={control}
          render={(props) => (
            <InputMask
              mask="99.999.999/9999-99"
              value={props.field.value}
              disabled={false}
              onChange={(value): void => {
                props.field.onChange(value)
                changeHandler(value)
              }}
            >
              <TextField
                disabled={false}
                name="cnpj"
                type="text"
                label='Cnpj'
                placeholder='(e.g.: 60.133.365/0001-16)'
                error={Boolean(errors.cnpj)} 
              />
            </InputMask>
          )}
        />
        {errors.cnpj && <FormHelperText sx={{ color: 'error.main' }}>{errors.cnpj.message}</FormHelperText>}
      </FormControl>
user_197778980
Related