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
Open
va-telephone-input: prevent cursor from jumping to end of input on edit#2075it-harrison wants to merge 5 commits into
it-harrison wants to merge 5 commits into
Conversation
…-of-veterans-affairs/component-library into va-telephone-input-cursor-fix
RyanMunsch
approved these changes
Apr 21, 2026
Contributor
RyanMunsch
left a comment
There was a problem hiding this comment.
LGTM. Cursor position is behaving as expected on "with contact" story.
jamigibbs
approved these changes
Apr 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Chromatic
https://va-telephone-input-cursor-fix--65a6e2ed2314f7b8f98609d8.chromatic.com
Summary
This PR fixes a bug in
va-telephone-inputin 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
minorlabel🌱 New Component Variation Added
minorlabel🐞 Component Fix
patchlabel♿️ Component Fix - Accessibility
patchlabel🚨 Component Fix - Breaking API Change
majorlabel🔧 Component Update - Non-Breaking API Change
minorlabel📖 Storybook Update
ignore-for-releaselabel🎨 CSS-Library Update
css-librarylabel