akinncar / react-native-mask-text

🎭 A React Native and Expo library to mask text and inputs
MIT License
415 stars 39 forks source link

Caret position is wrong on next letters on iOS and Android #35

Closed kopax-polyconseil closed 3 years ago

kopax-polyconseil commented 3 years ago

Steps to reproduce

const codeInputPlaceholder = ('0' + '\u00a0'.repeat(5)).repeat(5) + '0'
const codeInputMask = ('9' + ' '.repeat(5)).repeat(5) + '9'

// ...

            <MaskedTextInput
              onChangeText={(text, rawText) => {
                onChangeValue(rawText ?? '')
              }}
              placeholder={codeInputPlaceholder}
              placeholderTextColor={ColorsEnum.GREY_DARK}
              mask={codeInputMask}
              keyboardType="number-pad"
              testID="code-input"
            />

Expected behaviour

It should have caret positionned before letter when typing

Actual behaviour

Caret is located after the last typed character:

image

Caret should be before next character to be typed.

Ex: in previous screen, it should be located right before the 5, not right after the 1

image

Environment

react-native-mask-text

Version: 0.2.2

Link to repo (highly encouraged)

PR :

https://github.com/pass-culture/pass-culture-app-native/pull/1469

kopax-polyconseil commented 3 years ago

résolved using maxLength and letterSpacing