fix(DatePicker): call onChange for typed dates - #23165
Conversation
✅ Deploy Preview for v12-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v12-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #23165 +/- ##
==========================================
- Coverage 89.69% 89.68% -0.01%
==========================================
Files 640 640
Lines 59141 59171 +30
Branches 8305 8356 +51
==========================================
+ Hits 53047 53070 +23
- Misses 5927 5934 +7
Partials 167 167
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
| } | ||
|
|
||
| const expectedValueLength = calendar.formatDate( | ||
| new Date(2000, 10, 22), |
There was a problem hiding this comment.
Could you explain this value?
There was a problem hiding this comment.
Hi, Good callout. This is just a representative fixed date used to derive the expected length of a complete value for the active dateFormat.
For example:
m/d/Yformatsnew Date(2000, 10, 22)as11/22/2000d.m.Yformats it as22.11.2000
So the input handler can skip parsing partial typed values until the user has entered enough characters for that format. I used month/day 22 and year 2000 because they produce two-digit day/month and a four-digit year, avoiding a shorter formatted value like 1/2/2000.
I can add a short comment here to make that intent clearer.
2 participants
Closes #23122
Fixes
DatePickerso typing a complete valid date in a single picker callsonChangeimmediately, matching the calendar selection path. The typed commit path only runs for valid, fully formatted values and avoids duplicate callbacks when the input later blurs.Changelog
New
d.m.Yformat.Changed
parseDatetest mock so it behaves like a reusable parser across typed and Enter commit paths.Removed
Testing / Reviewing
Run the focused DatePicker tests:
Run formatting and whitespace checks:
In Storybook, open
Components/DatePicker/Single with calendar.Type a complete valid date into the input without pressing Enter or blurring.
Confirm
onChangefires immediately in the Actions panel.Blur the input and confirm
onChangeis not duplicated for the same typed value.Type an invalid custom-format date in a DatePicker using
dateFormat="d/m/Y"and confirm it is not committed as a selected date while typing.PR Checklist
As the author of this PR, before marking ready for review, confirm you:
Updated documentation and storybook examplesFollowed therequired v12 migration documentation
for any code change that affects v12, or struck through this item because
the PR does not affect v12
Tested for cross-browser consistency