Skip to content
This repository is currently being migrated. It's locked while the migration is in progress.

va-telephone-input: prevent cursor from jumping to end of input on edit#2075

Open
it-harrison wants to merge 5 commits into
mainfrom
va-telephone-input-cursor-fix
Open

va-telephone-input: prevent cursor from jumping to end of input on edit#2075
it-harrison wants to merge 5 commits into
mainfrom
va-telephone-input-cursor-fix

Conversation

@it-harrison
Copy link
Copy Markdown
Contributor

@it-harrison it-harrison commented Apr 17, 2026

Chromatic

https://va-telephone-input-cursor-fix--65a6e2ed2314f7b8f98609d8.chromatic.com

Summary

This PR fixes a bug in va-telephone-input in which the cursor jumps to the end of an entered telephone number when the number is edited.

Description

When a user clicked into the middle of a formatted phone number and typed or deleted a character, the cursor would jump to the end of the string. This happened because the component reformats on every keystroke caused which lead to to re-render of the input with a new value prop, which resets the browser's caret position.

Related tickets and links

Link to any related issues, PRs, Slack conversations, or anything else relevant to documenting the changes.

Closes #5658

Screenshots

Before (note cursor jumps to end of input after first keystroke and this results in the wrong number being entered):

Screen.Recording.2026-04-17.at.1.01.42.PM.mov

After: (no cursor jump)

Screen.Recording.2026-04-17.at.12.59.50.PM.mov

Testing and review

local testing

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added
  • The PR has the minor label
  • The component matches the Figma designs.
  • All properties, custom events, and utility functions have e2e and/or unit tests
  • A new Storybook page has been added for the component
  • Tested in all VA breakpoints.
  • Chromatic UI Tests have run and snapshot changes have been accepted by the design reviewer
  • Tested in vets-website using Verdaccio
  • Engineering has approved the PR
  • Design has approved the PR
  • Accessibility has approved the PR
🌱 New Component Variation Added
  • The PR has the minor label
  • The variation matches its Figma design.
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • A new story has been added to the component's existing Storybook page
  • Any Chromatic UI snapshot changes have been accepted by a design reviewer
  • Tested in vets-website using Verdaccio
  • Engineering has approved the PR
  • Design has approved the PR
🐞 Component Fix
  • The PR has the patch label
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • Any markup changes are evaluated for impact on vets-website.
    • Will any vets-website tests fail from the change?
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Engineering has approved the PR
♿️ Component Fix - Accessibility
  • The PR has the patch label
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Engineering has approved the PR
  • Accessibility has approved the PR
🚨 Component Fix - Breaking API Change
  • The PR has the major label
  • vets-website and content-build have been evaluated to determine the impact of the breaking change
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Tested in vets-website using Verdaccio
  • Engineering has approved the PR
🔧 Component Update - Non-Breaking API Change
  • The PR has the minor label
  • Any new properties, custom events, or utility functions have e2e and/or unit tests
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Engineering has approved the PR
📖 Storybook Update
  • The PR has the ignore-for-release label
  • Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
  • Engineering has approved the PR
🎨 CSS-Library Update
  • The PR has the css-library label
  • vets-website and content-build have been checked to determine the impact of any breaking changes
  • Engineering has approved the PR

@it-harrison it-harrison requested a review from a team as a code owner April 17, 2026 18:05
@it-harrison it-harrison added the minor For a minor Semantic Version change label Apr 17, 2026
Copy link
Copy Markdown
Contributor

@RyanMunsch RyanMunsch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Cursor position is behaving as expected on "with contact" story.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

minor For a minor Semantic Version change

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants