Skip to content

fix: clear selection when masked input is cleared on blur#6180

Merged
martijnrusschen merged 1 commit intomainfrom
fix/issue-5814-mask-input-clearing
Dec 18, 2025
Merged

fix: clear selection when masked input is cleared on blur#6180
martijnrusschen merged 1 commit intomainfrom
fix/issue-5814-mask-input-clearing

Conversation

@martijnrusschen
Copy link
Copy Markdown
Member

Summary

  • Fixes issue where customInput with mask library (like react-input-mask) doesn't clear properly in React 18
  • When user clears a masked input, the value becomes a mask pattern like __/__/____ instead of empty string
  • Previously, on blur the DatePicker would reset the input to the previously selected date
  • This fix detects cleared mask patterns (no alphanumeric characters) and clears the selection instead

Technical Details

The fix distinguishes between:

  • __/__/____ (cleared mask) → clears the selection on blur
  • 2025-02-45 (invalid date) → keeps previous selection (existing behavior preserved)

This is done by checking if the input value contains any alphanumeric characters. If it doesn't (like a mask pattern with only underscores and slashes), we clear the selection.

Test plan

  • Added test for controlled component clearing behavior
  • Added test specifically for mask pattern clearing (__/__/____)
  • Verified existing "input reset" tests still pass (invalid dates should reset to previous value)
  • Full test suite passes (1473 tests)

Fixes #5814

🤖 Generated with Claude Code

When using a controlled DatePicker with a mask library (like react-input-mask),
clearing the input results in a mask pattern like "__/__/____" instead of an
empty string. Previously, on blur the DatePicker would reset the input to the
previously selected date because it treated the mask pattern as an unparseable
date.

This fix detects when the input value contains no alphanumeric characters
(indicating a cleared mask pattern rather than an invalid date attempt) and
clears the selection on blur instead of reverting to the previous date.

This distinguishes between:
- "__/__/____" (cleared mask) → clears the selection
- "2025-02-45" (invalid date) → keeps previous selection (existing behavior)

Fixes #5814

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@codecov
Copy link
Copy Markdown

codecov Bot commented Dec 18, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.31%. Comparing base (0231bbd) to head (e5d4948).
⚠️ Report is 6 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6180   +/-   ##
=======================================
  Coverage   99.31%   99.31%           
=======================================
  Files          30       30           
  Lines        3801     3806    +5     
  Branches     1652     1654    +2     
=======================================
+ Hits         3775     3780    +5     
  Misses         25       25           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@martijnrusschen martijnrusschen merged commit d4625d4 into main Dec 18, 2025
6 checks passed
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.

Doesn't work customInput with mask when use React 18

1 participant