Autofill on iOS (Chrome, Safari) causes infinite loop and crashes the application

[zozich]

When I try to autofill any value into phone input created via ReactInputMask, it crashes the application. This is the error we receive in console on production: https://reactjs.org/docs/error-decoder.html/?invariant=185

This is how InputMask is called from parent:

<InputMask
        mask='(99) 999-99-99'
        type='tel'
        alwaysShowMask
        fontSize={fontSize}
        phoneChanged={phoneChanged}
        value={(getValue() || '').substring(code.length)}
        name='phone-suffix'
      />

And this is how it looks inside:

function InputMask(props) {
  const { mask, maskChar, formatChars, alwaysShowMask, fontSize, phoneChanged, name, ...rest } = props;

  return (
    <ReactInputMask
      mask={mask}
      maskChar={maskChar}
      formatChars={formatChars}
      alwaysShowMask={alwaysShowMask}
      onChange={phoneChanged}
      {...rest}
    >
      {(inputProps) => (
        <TextInput
          fontSize={fontSize}
          name={name}
          {...inputProps}
        />
      )}
    </ReactInputMask>
  );
}

Reproducible only on iOS

[therealsqvad]

Faced the same issue in Chrome iOS Credit card mask 9999 9999 9999 9999 Application crashes when autocomplete

[zozich]

@therealsqvad This is where I migrated instead and what solves the issue https://github.com/s-yadav/react-number-format

[joefiorini]

FWIW this appears to be fixed in the latest alpha of 3.0. I reproduced it with the latest stable release in a CodeSandbox then updated to the latest alpha and don't see that error anymore.

https://codesandbox.io/s/maskedinputcomparisons-libhi

[mfaheemakhtar]

Was facing same issue and found that forgot to pass the value prop to the mask.

[gkelley]

Just reproduced this same issue on iOS only.

[ornakash]

Same thing here. I managed to fix the crash by passing maxLength={5} to the expiary date element. It should help you