Skip to content

fix: surface validation error for incomplete date segment values#10097

Open
AKnassa wants to merge 7 commits into
adobe:mainfrom
AKnassa:fix/incomplete-date-segment-validation
Open

fix: surface validation error for incomplete date segment values#10097
AKnassa wants to merge 7 commits into
adobe:mainfrom
AKnassa:fix/incomplete-date-segment-validation

Conversation

@AKnassa
Copy link
Copy Markdown

@AKnassa AKnassa commented May 22, 2026

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 value state remains null for incomplete dates — so getValidationResult never 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

adobe-design-system-changes

Solution

Introduce an isValuePartial flag that tracks whether the display buffer has some-but-not-all editable segments filled. This flag is:

  • Computed in useDateFieldState from displayValue.isComplete() / displayValue.isCleared()
  • Passed into getValidationResult to mark the field invalid and set valueMissing: true
  • Lifted from inner DateField components up to DatePicker / DateRangePicker via a private prop (privateSetIsValuePartialProp) so the parent's validation pipeline sees it
  • Reset synchronously when setValue() is called with a complete value, preventing stale errors after calendar selection

When 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 — adds isValuePartial to state; passes it to getValidationResult
  • useDatePickerState.ts / useDateRangePickerState.ts — lift partial state from inner fields; wrap setValue to reset flags on commit
  • utils.tsgetValidationResult / getRangeValidationResult accept isValuePartial; constraint errors take priority over the generic message
  • useDateField.ts — commits validation on blur when partial; pushes partial state to parent; empties hidden input when partial
  • useDatePicker.ts / useDateRangePicker.ts — forward privateSetIsValuePartialProp to inner fields
  • useFormValidationState.ts — exports privateSetIsValuePartialProp constant
  • intl/datepicker/*.json — adds incompleteValue key to all 36 locale files
  • scripts/missingTranslations.js — extended to scan intl/datepicker/ subdirectories

Test plan

  • DateField: clear a segment → blur → error appears; refill → error clears
  • DatePicker: clear a segment → blur → error appears; select from calendar → error clears on FIRST selection
  • DateRangePicker: clear a start/end segment → blur → error appears; select range → error clears on FIRST selection
  • TimeField: clear hour segment → blur → error appears; refill → error clears
  • Partial value with violated min/max shows descriptive message, not generic one
  • isRequired validation still works as before
  • validationBehavior="aria" path unaffected

AKnassa added 6 commits May 15, 2026 11:29
…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
@AKnassa AKnassa marked this pull request as ready for review May 22, 2026 04:56
@AKnassa AKnassa closed this May 22, 2026
@AKnassa AKnassa reopened this May 22, 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.

DatePicker required validation is inconsistent when clearing different segments (month vs day/year)

1 participant