'Editing Issue with react-native-mask-input Date Field
I'm using the react-native-mask-input library to enforce slashes in a date field. I have it working but when the user goes to edit somewhere in the middle of the date field (masked), it causes the input to jump to the end and edits out a date number.
Here is the input component:
<AccessibleTextInput
accessibilityLabel="text"
placeholder="mm/dd/yyyy"
testID="registerDOBInput"
onChange={(val) => dob.setVal(val)}
maxLength={10}
value={masked}
fieldError={dob.touched || isSubmit ? dob.fieldError : undefined}
/>
The onChange method is using a custom build useField hook for string entries and validations:
const dob = useField<string>('', [dobRequired, validDate, dobFormat])
And the Mask formatting schema is:
const { masked } = formatWithMask({
text: dob.val,
mask: Masks.DATE_MMDDYYYY,
obfuscationCharacter: '/',
})
This is the before:
And trying to edit the date (30), this is what happens when hitting backspace to edit the 0 in the 30:
It moves the on over passed the masked slash. Anyway around this?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


