Wrong input inserting unwanted text

[RBrNx]

I have started using this library in my React Native app and came across the following issue.

Steps to reproduce:

1. Set up React-Native-Masked-Text with a custom mask that contains delimeters, I used AA-99-99-99-A
2. Type the characters correctly up until the first delimiter, AB
3. Now type the next character incorrectly, AB-C. The next character is removed (correctly) and replaced with the delimiter in the string.
4. Now continue typing the next character correctly as before, AB-1, you can see that the inputs briefly changes to AB-ABC1 before resetting to AB-1.

In this case it is only a visual bug, but if you repeat these steps for the next few characters in this mask, you will end up with the stray characters appearing in the input, like here.

You can view this happening frame by frame using the arrow keys on your keyboard here

My initial line of thinking is that it is an issue with AutoCorrect, but even adding autoComplete={false} to the TextInputMask does not help.

Tested and reproduced on

• Samsung Galaxy Note 8, Android 9, React-Native-Masked-Text v1.12.1
• Huawei P8 lite, Android 7, React-Native-Masked-Text v1.12.1

[bhrott]

Hi @RBrNx ! Are you using redux or another lib that controls the text input instead of using normal state and setState?

[RBrNx]

Hi @benhurott, thanks for the quick reply!

Not that I know of. My app is built using Expo but I don't think that should affect it.

Here is a copy of the StandardMaskInput class I am using

class StandardMaskInput extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      maskedValue: null,
    };
  }

  render() {
    const {
      inputStyle,
      onChangeText,
      mask,
      placeholder,
      autoCapitalize,
    } = this.props;
    return (
      <TextInputMask
        type={'custom'}
        options={{ mask: mask }}
        value={this.state.maskedValue}
        style={[styles.standardInput, inputStyle]}
        includeRawValueInChangeText={true}
        placeholder={placeholder}
        autoCapitalize={autoCapitalize}
        autoCorrect={false}
        placeholderTextColor={'lightgrey'}
        onChangeText={(masked, raw) => {
          this.setState({ maskedValue: masked });
          onChangeText(masked, raw);
        }}
        returnKeyType={'done'}
      />
    );
  }
}

[bhrott]

Ok! Thanks for reporting! I will investigate this asap because I think other opened issues could be related to this.

o/

[bhrott]

Hi @RBrNx I published a new version: 1.12.2

Could you check if the issue persists?

[RBrNx]

Hi @benhurott, thanks for the really quick response.

Unfortunately I can still reproduce the issue on version 1.12.2

[bhrott]

Ooook back to work =/

[bhrott]

@RBrNx I opened an issue in React-Native repo for this. A basic component has this issue even without masked text.

https://github.com/facebook/react-native/issues/24585