fix: surface validation error for incomplete date segment values#10097
Open
AKnassa wants to merge 7 commits into
Open
fix: surface validation error for incomplete date segment values#10097AKnassa wants to merge 7 commits into
AKnassa wants to merge 7 commits into
Conversation
…9624 These tests reproduce three bugs introduced by adobe#9510 (IncompleteDate): - adobe#9958: DatePicker required validation skips on month clear - adobe#9801: TimeField hidden input retains stale value after partial clear - adobe#9624: DateField partial value not flagged as invalid on blur Tests are intentionally failing — fix follows in a subsequent commit.
…dobe#9801, adobe#9624) When a user partially fills a date field (some segments typed, some still placeholders) the value is an IncompleteDate and was silently swallowed — no validation error was raised on form submit or blur. - Add `isValuePartial` flag to `DateFieldState`, derived from `IncompleteDate.isComplete / isCleared` on the display value. - Pass `isValuePartial` into `getValidationResult` / `getRangeValidationResult` so the built-in validation pipeline marks the field invalid and sets `valueMissing: true` in the ValidityState object. - Add "Please enter a value." i18n string (`incompleteValue`) used when the partial-state error is the active error. - Lift partial state up from the inner DateField(s) to DatePickerState and DateRangePickerState via a new private symbol prop (`privateSetIsValuePartialProp`) so those parents can include it in their own `builtinValidation` memo and revalidate reactively. - Wire the setter call in `useDateField` / `useDateRangePicker` so the parent receives updates whenever the user edits a segment. - Add regression tests covering: partial-fill validation, clear-after-partial resets error, full-fill clears error, and form-submit behaviour for DateField, DatePicker, and DateRangePicker.
…eneric incomplete message - useDatePickerState / useDateRangePickerState: wrap setValue so any committed date resets isValuePartial flags, preventing stale partial-state when consumer calls state.setValue() directly - utils.ts: reorders incompleteValue error push so constraint errors (rangeUnderflow, rangeOverflow, unavailableDate) are shown first; the generic "Please enter a value." only appears when there are no other errors
Previously only top-level intl/ dirs were checked, so the new incompleteValue key added under intl/datepicker/ was invisible to the translator tooling. Extended the glob to also scan intl/datepicker/ subdirectories.
Adds "incompleteValue": "Please enter a value." as an English placeholder to all 33 remaining locale JSON files under intl/datepicker/. Real translations will be provided separately via the standard translation workflow.
…ndar-selection fix Adds 3 new test cases in DatePicker and 1 in DateRangePicker covering: - Descriptive constraint error (not generic) when partial value violates min/max - "Takes two interactions" calendar-selection fix for DatePicker - Time-segment clearing on CalendarDateTime (issue adobe#9801) - "Takes two interactions" calendar-selection fix for DateRangePicker
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When a user partially fills a date field (e.g., clears the month segment but leaves year and day set), no validation error was surfaced. The
valuestate remainsnullfor incomplete dates — sogetValidationResultnever saw it as invalid, and the field appeared valid even though the user had entered an incomplete value.Affects: DateField, DatePicker, DateRangePicker, TimeField
Fixes #9958, #9801, #9624
Solution
Introduce an
isValuePartialflag that tracks whether the display buffer has some-but-not-all editable segments filled. This flag is:useDateFieldStatefromdisplayValue.isComplete()/displayValue.isCleared()getValidationResultto mark the field invalid and setvalueMissing: trueDateFieldcomponents up toDatePicker/DateRangePickervia a private prop (privateSetIsValuePartialProp) so the parent's validation pipeline sees itsetValue()is called with a complete value, preventing stale errors after calendar selectionWhen a partial value also violates a constraint (min/max/unavailableDate), the descriptive constraint message is shown instead of the generic "Please enter a value." fallback.
Changes
useDateFieldState.ts— addsisValuePartialto state; passes it togetValidationResultuseDatePickerState.ts/useDateRangePickerState.ts— lift partial state from inner fields; wrapsetValueto reset flags on commitutils.ts—getValidationResult/getRangeValidationResultacceptisValuePartial; constraint errors take priority over the generic messageuseDateField.ts— commits validation on blur when partial; pushes partial state to parent; empties hidden input when partialuseDatePicker.ts/useDateRangePicker.ts— forwardprivateSetIsValuePartialPropto inner fieldsuseFormValidationState.ts— exportsprivateSetIsValuePartialPropconstantintl/datepicker/*.json— addsincompleteValuekey to all 36 locale filesscripts/missingTranslations.js— extended to scanintl/datepicker/subdirectoriesTest plan
isRequiredvalidation still works as beforevalidationBehavior="aria"path unaffected