Skip to content

Fix: Date typing improvements#2046

Open
joe-herbert wants to merge 5 commits into
huntabyte:mainfrom
joe-herbert:fix/date-typing-improvements
Open

Fix: Date typing improvements#2046
joe-herbert wants to merge 5 commits into
huntabyte:mainfrom
joe-herbert:fix/date-typing-improvements

Conversation

@joe-herbert
Copy link
Copy Markdown

@joe-herbert joe-herbert commented May 6, 2026

This PR fixes this issue regarding unexpected behaviour when typing into a date field.

This can be broken down into three fixes:

Firstly, pressing backspace when the year segment only had one character caused the entire date to be cleared, frustratingly meaning the user had to enter the day and month again. We now have a private #segmentClearedValue variable which is used to specify whether the segment was cleared by the user, in which case we should not clear the whole input. This method ensures if this code is triggered from anywhere else its behaviour is unchanged.

Secondly, there was an issue regarding when to move to the next segment when backspace had been used. The existing implementation thinks you should move forward after typing enough characters to match the number of backspaces, however this causes an issue when someone makes a typo. e.g. if someone makes a mistake at the start of entering the year and they type 1, Backspace, 2 the focus will jump to the next segment before the user gets a chance to type the rest of the year. This fix now sticks with the same segment until that segment is completed.

Thirdly, there were issues stemming from padding incomplete segments with preceding zeros. These zeros were then treated as part of the segment's value, which caused confusion when completing or editing a segment, particularly noticeable when backspacing in the year segment. This fix uses integer division to remove the last character and then reapplies the padding before it is shown. This ensures the full padding is always shown to the user but the preceding zeros don't impact the backspace process.

The should handle backspacing the year segment appropriately date-field test has also been updated to reflect the new behaviour.

This has been tested manually, and tests have been run to confirm the only failures were pre-existing.

If there are any changes you'd like, please let me know!

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 6, 2026

⚠️ No Changeset found

Latest commit: c1a93a2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
bits-ui ✅ Ready (View Log) Visit Preview c1a93a2

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DatePicker backspace behavior

1 participant