react-atlas icon indicating copy to clipboard operation
react-atlas copied to clipboard

TextField Mask loses key when typing over a constant

Open bwilliams-un opened this issue 7 years ago • 3 comments

Steps to reproduce:

  1. Create a TextField with mask="11/11"
  2. Type two numbers, cursor will appear after the forward slash 11/|__
  3. Press Backspace, the cursor moves to 11|/__
  4. Type a number

Expected behavior: The character typed appears after the /.

Actual behavior: The cursor moves after the / but the key press is consumed and never appears.

This could be related to the fact that Backspace should consume the 11 and not move the cursor (it's trying to remove the constant). It could be a bug with the mask library and not our code, we should verify and try to resolve.

bwilliams-un avatar Jul 16 '18 17:07 bwilliams-un

mask library documentation: https://github.com/insin/inputmask-core it looks like we're using mask.backspace, and that seems to be intended behavior for mask.backspace - see the quote below.

backspace() : boolean
Performs a backspace operation based on the current selection.

If the cursor is positioned after a static part of the mask, the cursor will be placed before it.

stuller avatar Jul 16 '18 18:07 stuller

Backspace behavior doesn't bother me. The issue that typing into a constant loses a valid key press that is not backspace is a problem.

bwilliams-un avatar Jul 16 '18 18:07 bwilliams-un

yeah, still looking to see if that's a library thing or the way we're using it

stuller avatar Jul 16 '18 18:07 stuller