How to mask material ui input in formic with using react-input-mask (typescript)

Question

Input in formik Error in type of TextField

        <InputMask
          mask="99/99/9999"
          value={formik.values.phone}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        >
          {(inputProps: Props): ReactElement => (
            <TextField
              {...inputProps}
              type="tel"
              label={t("addDriverModal.phone")}
            />
          )}
        </InputMask>

Does not work. Props - type declaration from @types/react-input-mask

M. G. · Accepted Answer · 2020-08-11 08:32:52Z

3

import { TextField, TextFieldProps } from "@material-ui/core";
import InputMask, {Props} from 'react-input-mask';

    <InputMask
      mask="99/99/9999"
      value={formik.values.phone}
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
    >
      {/*
          'props' supplied to TextField weren't matching the required type. 
          Hence we use '&' operator which is for intersecting two types
       */} 
      {(inputProps: Props & TextFieldProps)=>
        <TextField
          {...inputProps}
          type="tel"
          label={t("addDriverModal.phone")}
        />
      }
    </InputMask>

answered Aug 11, 2020 at 8:32

M. G.

5912 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amir Rezvani · Accepted Answer · 2019-12-04 09:13:15Z

I'm not sure how it works in TypeScript but you can do this.

/*  Create Your Mask Component Like This */

const phoneMaskComponent = arg => {
	const { inputRef, ...other } = arg;
	const digitRegExp = /[0-9٠-٩۰-۹]/;

	return (
		<MaskedInput
			ref={ref => {
				inputRef(ref ? ref.inputElement : null);
			}}
			guide={false}
			mask={strNumber => {
				return strNumber.split('').map(() => {
					return digitRegExp;
				});
			}}
			pipe={str => {
				const newStr = str
					.replace(/[٠١٢٣٤٥٦٧٨٩]/g, d => d.charCodeAt(0) - 1632)
					.replace(/[۰۱۲۳۴۵۶۷۸۹]/g, d => d.charCodeAt(0) - 1776)
					.replace(/[^0-9]+/g, '');

				return {
					value: newStr,
					indexesOfPipedChars: range(newStr.length * 2),
				};
			}}
			{...other}
		/>
	);
};

/* Set The Mask in Your Input Component */
<InputBase
    fullWidth
    isLtr
    name="phone"
    label="Enter Phone Number"
    type="tel"
    value={formik.values.phone}
    /* Use The Mask like This */
    inputComponent={phoneMaskComponent}
  />

this mask dose not let user to enter En numbers.

Guilherme Jacobsen · Accepted Answer · 2020-03-19 12:02:04Z

0

i done that way and it works for me:

const MYInput = ({...props}) => (
    <Field
        name={props.name}
        render={({field}) => {
          return (
            <InputMask
              {...field}
              mask={props.mask}
              > 
                {(innerProps) => (
                    <TextField
                      {...innerProps}
                      variant={props.variant ? props.variant : 'filled'}
                      label={props.label ? props.label : ''}
                      />

                )}
              </InputMask>

          )
        }}
      />


);

<MYInput name="Phone" label="Phone" mask="(99) 99999-9999" />

answered Mar 19, 2020 at 12:02

Guilherme Jacobsen

31 bronze badge

Collectives™ on Stack Overflow

How to mask material ui input in formic with using react-input-mask (typescript)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related