Skip to content

fix(DateField): handle too long and non-numeric input#1990

Merged
huntabyte merged 5 commits into
huntabyte:mainfrom
jordigagomerino:fix/date-picker-behaviour-on-webkit
Mar 30, 2026
Merged

fix(DateField): handle too long and non-numeric input#1990
huntabyte merged 5 commits into
huntabyte:mainfrom
jordigagomerino:fix/date-picker-behaviour-on-webkit

Conversation

@jordigagomerino

Copy link
Copy Markdown
Contributor

Summary

  • Add onbeforeinput event handler to date field segments to prevent arbitrary text input
  • Segments use contenteditable="true" for focus/keyboard handling, but relied solely on onkeydown +
    preventDefault() to block invalid input
  • Safari and certain input methods (paste, IME, mobile keyboards) can bypass keydown prevention on contenteditable
    elements, allowing users to type letters or invalid values into date segments

Fix

Added onbeforeinput: (e) => e.preventDefault() to sharedSegmentAttrs, which blocks all browser-native text insertion
at the input pipeline level. This is safe because segment values are always managed programmatically through
updateSegment() and Svelte state — the browser never needs to insert text directly.

@changeset-bot

changeset-bot Bot commented Mar 19, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e193ee4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
bits-ui Patch

Not sure what this means? Click here to learn what changesets are.

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

@github-actions

github-actions Bot commented Mar 19, 2026

Copy link
Copy Markdown
Contributor
built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

…nput

Use a flag-based approach with capture-phase keydown/keyup handlers to
distinguish keyboard-initiated beforeinput events from browser-initiated
ones (autocomplete, IME, etc.) on WebKit. Only prevent beforeinput when
it was not triggered by a keyboard event.
…n WebKit/Firefox

WebKit and Firefox fire beforeinput on contenteditable elements even after
keydown.preventDefault(), causing native text insertion to corrupt segment
display. Prevent single-character and null-data beforeinput events while
allowing multi-character insertText API calls through.

@huntabyte huntabyte left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

Thank you!

@huntabyte huntabyte changed the title Fix: Date picker accepts too long and non-numeric input fix(DateField): handle too long and non-numeric input Mar 30, 2026
@huntabyte huntabyte merged commit ac5acf9 into huntabyte:main Mar 30, 2026
6 checks passed
@github-actions github-actions Bot mentioned this pull request Mar 30, 2026
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.

2 participants