Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AKnassa wants to merge 8 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2e3f908
test: add failing regression tests for #9958, #9801, #9624
AKnassa May 15, 2026
7da2cff
fix: surface validation error for incomplete date values (#9958, #980…
AKnassa May 18, 2026
5972f92
fix: reset isValuePartial on setValue; show constraint error before g…
AKnassa May 22, 2026
ea18a42
chore: extend missingTranslations script to scan intl subdirectories
AKnassa May 22, 2026
61c069e
i18n: add incompleteValue key to all datepicker locale files
AKnassa May 22, 2026
939953f
test: add edge-case regressions for partial-value validation and cale…
AKnassa May 22, 2026
610b628
chore: fix formatting in datepicker files
AKnassa May 22, 2026
7ef5cc6
Merge remote-tracking branch 'origin/main' into fix/incomplete-date-s…
AKnassa Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 168 additions & 0 deletions packages/@adobe/react-spectrum/test/datepicker/DateField.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -764,6 +764,142 @@ describe('DateField', function () {
await user.tab();
expect(getDescription()).not.toContain('Constraints not satisfied');
Comment thread
AKnassa marked this conversation as resolved.
});

it('should signal valueMissing when a complete date is made partial by clearing a segment (Bug #9624)', async () => {
// Regression (per devongovett's direction in #9624): a partially-filled required
// DateField should be marked invalid on blur. onChange(null) is deliberately NOT
// fired for partial values; getValidationResult compensates by surfacing the
// localized "Please enter a value." message via builtinValidation.
let {getByRole} = render(
<Provider theme={theme}>
<Form data-testid="form">
<DateField label="Date" name="date" isRequired validationBehavior="native" />
</Form>
</Provider>
);

let group = getByRole('group');
let input = document.querySelector('input[name=date]');

// Fill a complete valid date: 4/28/2026
await user.tab();
await user.keyboard('4');
await user.keyboard('28');
await user.keyboard('2026');
expect(input.validity.valid).toBe(true);

// Refocus the month and clear it
let segments = within(group).getAllByRole('spinbutton');
act(() => {
segments[0].focus();
});
await user.keyboard('{Backspace}');
expect(segments[0]).toHaveAttribute('aria-valuetext', 'Empty');

// Tab forward past day and year to exit the group
await user.tab();
await user.tab();
await user.tab();

// The hidden input should reflect missing value and validation should surface
expect(input.validity.valid).toBe(false);
let getDescriptionAfter = () =>
(group.getAttribute('aria-describedby') || '')
.split(' ')
.map(d => document.getElementById(d)?.textContent || '')
.join(' ');
expect(getDescriptionAfter()).toContain('Please enter a value.');
});

it('should clear the validation error after a partial field is completed (Bug #9624 round-trip)', async () => {
// Locks the lifecycle: complete -> clear segment (error) -> re-complete with a new
// valid value (error clears). Verifies the fix does not leave the field stuck invalid.
let {getByRole} = render(
<Provider theme={theme}>
<Form data-testid="form">
<DateField label="Date" name="date" isRequired validationBehavior="native" />
</Form>
</Provider>
);

let group = getByRole('group');
let input = document.querySelector('input[name=date]');

await user.tab();
await user.keyboard('4');
await user.keyboard('28');
await user.keyboard('2026');

let segments = within(group).getAllByRole('spinbutton');
act(() => {
segments[0].focus();
});
await user.keyboard('{Backspace}');
await user.tab();
await user.tab();
await user.tab();

let getDescription = () =>
(group.getAttribute('aria-describedby') || '')
.split(' ')
.map(d => document.getElementById(d)?.textContent || '')
.join(' ');
expect(getDescription()).toContain('Please enter a value.');

// Re-focus month and complete the date with a different valid value
act(() => {
segments[0].focus();
});
await user.keyboard('5');
await user.tab();
await user.tab();
await user.tab();

expect(input.validity.valid).toBe(true);
expect(getDescription()).not.toContain('Please enter a value.');
});

it('should signal validation for partial values regardless of isRequired (Bug #9958)', async () => {
// Per LFDanLu: "invalidate the field if the date is incomplete in general."
// The earlier scope-guard test asserted the opposite; updated to lock the new
// behavior — partial values are flagged invalid even without isRequired so that
// min/max/unavailable/validate configurations also block submission.
let {getByRole} = render(
<Provider theme={theme}>
<Form>
<DateField
label="Date"
name="date"
minValue={new CalendarDate(2020, 1, 1)}
defaultValue={new CalendarDate(2026, 4, 28)}
validationBehavior="native"
/>
</Form>
</Provider>
);

let group = getByRole('group');
let input = document.querySelector('input[name=date]');
let segments = within(group).getAllByRole('spinbutton');

act(() => {
segments[0].focus();
});
await user.keyboard('{Backspace}');
await user.keyboard('{Backspace}');
expect(segments[0]).toHaveAttribute('aria-valuetext', 'Empty');

await user.tab();
await user.tab();
await user.tab();

expect(input.validity.valid).toBe(false);
let description = (group.getAttribute('aria-describedby') || '')
.split(' ')
.map(d => document.getElementById(d)?.textContent || '')
.join(' ');
expect(description).toContain('Please enter a value.');
});
});

describe('validationBehavior=aria', () => {
Expand Down Expand Up @@ -850,6 +986,38 @@ describe('DateField', function () {
await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
expect(getDescription()).not.toContain('Invalid value');
});

it('should clear the hidden input value when partial in aria mode (Bug #9624)', async () => {
// Aria-mode counterpart to the native-mode #9624 regression: the hidden input must
// reflect the partial display state regardless of validationBehavior so any consumer
// (e.g. FormData) sees the missing value.
let {getByRole} = render(
<Provider theme={theme}>
<Form>
<DateField
label="Date"
name="date"
isRequired
validationBehavior="aria"
defaultValue={new CalendarDate(2026, 4, 28)}
/>
</Form>
</Provider>
);

let group = getByRole('group');
let input = document.querySelector('input[name=date]');
expect(input).toHaveValue('2026-04-28');

let segments = within(group).getAllByRole('spinbutton');
act(() => {
segments[0].focus();
});
await user.keyboard('{Backspace}');
expect(segments[0]).toHaveAttribute('aria-valuetext', 'Empty');

expect(input).toHaveValue('');
});
});
});
});
Expand Down
Loading