Backspace key writes "Ba" or "BB" in the Input when used with Mask "99.999.999-[99]|[aa]"

[matheusfscit]

Description:

When using the mask "99.999.999-[99]|[aa]" with the use-mask-input library, pressing the Backspace key results in the word "Backspace" being written into the input. However, since the mask allows only 2 characters for letters, it ends up writing "Ba" or "BB".

Code Example:

<Input
  type="text"
  label={
    <span>
      RG: <span className="text-red-500">*</span>
    </span>
  }
  variant="bordered"
  defaultValue={control._formValues["rg"]}
  isInvalid={!!errors.rg}
  labelPlacement="outside"
  placeholder="xx.xxx.xxx-xx"
  errorMessage={errors.rg?.message as string}
  className="max-w-[40rem]"
  {...registerWithMask("rg", "99.999.999-[99]|[aa]", {
    required: true,
    autoUnmask: true,
  })}
/>

Steps to Reproduce:

Use the mask "99.999.999-[99]|[aa]" in an input field. Type a valid RG number. (In Brazil some states RG has letters at the end) Press the Backspace key.

Expected Behavior:

The Backspace key should delete the previous character, not write "Ba" or "BB" into the input field.

Actual Behavior:

Pressing the Backspace key writes "Ba" or "BB" into the input field.

Environment:

Library Version: 3.4.0 I'm using the mask with react-hook-form

This issue seems to occur specifically with masks that include optional letter characters. It prevents proper user experience by inserting unwanted characters when attempting to delete.

Thank you for looking into this issue.

[Ilwel]

for some reason when i use the hook. The Backspace and Delete are write instead erase the input

[danim47c]

Same problem, here is kind of confusing.

[jackiepapers]

Same

[huksley]

Same thing, any workarounds for this?

[huksley]

Horrible hack but it works...

useEffect(() => {
  if (value && value.indexOf("BACKSPACE") > -1) {
    setValue(value.replace("BACKSPACE", "_"));
  }
}, [value]);

<input
  ref={masked ? withMask(mask) :undefined}
  value={value}
  onChange={e => {
    setValue(e.target.value);
  }}
  onFocus={() => {
    setMasked(true);
  }}
  onBlur={() => {
    setMasked(false);
  }}
/>