search

trussworks / react-uswds

USWDS 3.0 components built in React
https://trussworks.github.io/react-uswds/
Apache License 2.0
177 stars 80 forks source link

[fix] InputMask cursor position jumps #2671

Open brandonlenz opened 9 months ago

brandonlenz commented 9 months ago

ReactUSWDS Version & USWDS Version:

USWDS: latest (at time of writing 3.7.0) ReactUSWDS: latest (at time of writing 6.0.0)

Describe the bug

Editing InputMask input is a bad user experience due to jumping cursor

To Reproduce Steps to reproduce the behavior:

  1. Go to storybook
  2. Click on fill out any field, i.e. a phone number
  3. Scroll down to move your cursor to the middle or start of the field
  4. Note that any input attempting to backspace, delete, or replace a character immediately jumps to the end of the input
  5. Go to USWDS site and repeat steps 2 through 4, noting that the issue is present in USWDS as well

Expected behavior

Cursor position should be preserved.

There are a variety of open issues related to USWDS input mask (https://github.com/uswds/uswds/issues?q=is%3Aissue+is%3Aopen+mask), but I didn't see one specific to this issue, so step 1 would be to review and open with USWDS if necessary so that we can get their POV.

Additional context

Device and Browser Information (please complete the following information if describing a UI bug):

werdnanoslen commented 5 months ago

I've posted this upstream to https://github.com/uswds/uswds/issues/5827