'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:

enter image description here

And trying to edit the date (30), this is what happens when hitting backspace to edit the 0 in the 30:

enter image description here

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