Skip to content

fix(pickers): fire onError when dates are partially filled#22040

Open
M-Anastasia wants to merge 6 commits intomui:masterfrom
M-Anastasia:partially-filled-date
Open

fix(pickers): fire onError when dates are partially filled#22040
M-Anastasia wants to merge 6 commits intomui:masterfrom
M-Anastasia:partially-filled-date

Conversation

@M-Anastasia
Copy link
Copy Markdown

Resolves #17499 Supersedes #17514

Summary

Restores the partiallyFilledDate validation behavior from v7. Previously, if a user started typing a date (e.g., entering only the month) no validation error was triggered, and the onError callback was not fired.

This PR reintroduces this validation logic by tracking the partial fill state at the field level and passing it through the validation pipeline. It is based on the initial approach in #17514 but has been adapted to handle both single and range pickers correctly.

Changes

  • Added 'partiallyFilledDate' to CommonDateTimeValidationError type.

  • Added getIsPartiallyFilled method to valueManagers implementations (singleItemFieldValueManager and getRangeFieldValueManager) to accurately calculate if sections are partially filled.

  • Propagated isPartiallyFilled state through PickerPrivateContext so it can be accessed by validation hooks.

  • Updated Validator type signature and all validation functions (validateDate, validateTime, validateDateTime, validateDateRange, validateDateTimeRange) to accept and return early on partiallyFilledDate if the field is partially filled.

Test coverage

  • Added unit tests for DateField, DatePicker, DateTimeField, TimeField, DateRangePicker, MultiInputDateRangeField and SingleInputDateRangeField to verify aria-invalid state and onError callback for partially filled dates.

before:

2026-04-09.11.20.43.mov

after:

2026-04-09.11.18.27.mov

Anastasia Mastyaeva added 5 commits April 6, 2026 19:32
…ially-filled-date

# Conflicts:
#	packages/x-date-pickers-pro/src/hooks/useMultiInputRangeField/useMultiInputRangeField.ts
#	packages/x-date-pickers-pro/src/hooks/useMultiInputRangeField/useTextFieldProps.ts
#	packages/x-date-pickers/src/DateField/tests/blurPartialFilling.DateField.test.tsx
#	packages/x-date-pickers/src/DateField/tests/invalidStateKeyboard.DateField.test.tsx
@mui-bot
Copy link
Copy Markdown

mui-bot commented Apr 9, 2026

Deploy preview: https://deploy-preview-22040--material-ui-x.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 🔺+897B(+0.41%) 🔺+306B(+0.53%)
@mui/x-date-pickers-pro 🔺+1.77KB(+0.58%) 🔺+577B(+0.73%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 3784727

@M-Anastasia M-Anastasia changed the title [pickers]: fire onError when dates are partially filled fix[pickers]: fire onError when dates are partially filled Apr 9, 2026
@M-Anastasia M-Anastasia changed the title fix[pickers]: fire onError when dates are partially filled fix(pickers): fire onError when dates are partially filled Apr 9, 2026
@zannager zannager added the scope: pickers Changes related to the date/time pickers. label Apr 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: pickers Changes related to the date/time pickers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[pickers] Report partially-filled date via onError

3 participants