fix: Constrain day on blur

packages/@internationalized/date/src/calendars/BuddhistCalendar.ts

@@ -49,7 +49,6 @@ export class BuddhistCalendar extends GregorianCalendar {
   getDaysInMonth(date: AnyCalendarDate): number {
     return super.getDaysInMonth(toGregorian(date));
   }
-
   balanceDate(): void {}
 }
 

packages/@internationalized/date/src/calendars/EthiopicCalendar.ts

@@ -92,6 +92,10 @@ export class EthiopicCalendar implements Calendar {
     return getDaysInMonth(date.year, date.month);
   }
 
+  getMaxDays(): number {
+    return 30
+  }
+
   getMonthsInYear(): number {
     return 13;
   }

packages/@internationalized/date/src/calendars/GregorianCalendar.ts

@@ -109,6 +109,10 @@ export class GregorianCalendar implements Calendar {
     return 12;
   }
 
+  getMaxDays(): number {
+    return 31
+  }
+
   getDaysInYear(date: AnyCalendarDate): number {
     return isLeapYear(date.year) ? 366 : 365;
   }

packages/@internationalized/date/src/calendars/HebrewCalendar.ts

@@ -172,6 +172,10 @@ export class HebrewCalendar implements Calendar {
     return getDaysInMonth(date.year, date.month);
   }
 
+  getMaxDays(): number {
+    return 30;
+  }
+
   getMonthsInYear(date: AnyCalendarDate): number {
     return isLeapYear(date.year) ? 13 : 12;
   }

packages/@internationalized/date/src/calendars/IslamicCalendar.ts

@@ -69,6 +69,10 @@ export class IslamicCivilCalendar implements Calendar {
     return length;
   }
 
+  getMaxDays(): number {
+    return 30
+  }
+
   getMonthsInYear(): number {
     return 12;
   }

packages/@internationalized/date/src/calendars/PersianCalendar.ts

@@ -80,6 +80,10 @@ export class PersianCalendar implements Calendar {
     return isLeapYear ? 30 : 29;
   }
 
+  getMaxDays(): number {
+    return 31
+  }
+
   getEras(): string[] {
     return ['AP'];
   }

packages/@internationalized/date/src/manipulation.ts

@@ -115,7 +115,7 @@ function balanceDay(date: Mutable<AnyCalendarDate>) {
 
 function constrainMonthDay(date: Mutable<AnyCalendarDate>) {
   date.month = Math.max(1, Math.min(date.calendar.getMonthsInYear(date), date.month));
-  date.day = Math.max(1, Math.min(date.calendar.getDaysInMonth(date), date.day));
+  date.day = Math.max(1, Math.min(date.calendar.getMaxDays(), date.day));
 }
 
 export function constrain(date: Mutable<AnyCalendarDate>): void {
@@ -284,7 +284,7 @@ export function cycleDate(value: CalendarDate | CalendarDateTime, field: DateFie
       mutable.month = cycleValue(value.month, amount, 1, value.calendar.getMonthsInYear(value), options?.round);
       break;
     case 'day':
-      mutable.day = cycleValue(value.day, amount, 1, value.calendar.getDaysInMonth(value), options?.round);
+      mutable.day = cycleValue(value.day, amount, 1, value.calendar.getMaxDays(), options?.round);
       break;
     default:
       throw new Error('Unsupported field ' + field);

packages/@internationalized/date/src/types.ts

@@ -57,6 +57,8 @@ export interface Calendar {
   getDaysInMonth(date: AnyCalendarDate): number,
   /** Returns the number of months in the year of the given date. */
   getMonthsInYear(date: AnyCalendarDate): number,
+  /** Returns the maximum day. */
+  getMaxDays(): number,
   /** Returns the number of years in the era of the given date. */
   getYearsInEra(date: AnyCalendarDate): number,
   /** Returns a list of era identifiers for the calendar. */

packages/@react-aria/datepicker/src/useDateField.ts

@@ -81,9 +81,9 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
     },
     onBlurWithin: (e) => {
       state.confirmPlaceholder();
-      if (state.value !== valueOnFocus.current) {
+      if (state.isValueChanged) {
         state.commitValidation();
-      }
+      };
       props.onBlur?.(e);
     },
     onFocusWithinChange: props.onFocusChange

packages/@react-spectrum/datepicker/test/DateField.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, pointerMap, render as render_, within} from '@react-spectrum/test-utils-internal';
+import {act, pointerMap, fireEvent, render as render_, within} from '@react-spectrum/test-utils-internal';
 import {Button} from '@react-spectrum/button';
 import {CalendarDate, CalendarDateTime, ZonedDateTime} from '@internationalized/date';
 import {DateField} from '../';
@@ -236,6 +236,7 @@ describe('DateField', function () {
       );
       await user.tab();
       await user.keyboard('01011980');
+      await user.tab();
       expect(tree.getByText('Date unavailable.')).toBeInTheDocument();
     });
 
@@ -369,6 +370,7 @@ describe('DateField', function () {
       expect(input).toHaveAttribute('name', 'date');
       await user.tab();
       await user.keyboard('{ArrowUp}');
+      await user.tab({shift: true});
       expect(getDescription()).toBe('Selected Date: March 3, 2020');
       expect(input).toHaveValue('2020-03-03');
 
@@ -434,30 +436,36 @@ describe('DateField', function () {
           expect(document.activeElement).toBe(within(group).getAllByRole('spinbutton')[0]);
 
           await user.keyboard('[Tab][Tab][ArrowUp]');
-
+          
           expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
-          expect(input.validity.valid).toBe(true);
+          expect(input.validity.valid).toBe(false);
 
           await user.tab();
 
           expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
+          expect(input.validity.valid).toBe(true);
 
           await user.tab({shift: true});
           await user.keyboard('2025');
+
           expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
-          expect(input.validity.valid).toBe(false);
+          expect(input.validity.valid).toBe(true);
+
           await user.tab();
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
+          expect(input.validity.valid).toBe(false);
 
           act(() => {getByTestId('form').checkValidity();});
           expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
           expect(document.activeElement).toBe(within(group).getAllByRole('spinbutton')[0]);
 
           await user.keyboard('[Tab][Tab][ArrowDown]');
           expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
-          expect(input.validity.valid).toBe(true);
+          expect(input.validity.valid).toBe(false);
           await user.tab();
 
           expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
+          expect(input.validity.valid).toBe(true);
         });
 
         it('supports validate function', async () => {
@@ -480,12 +488,11 @@ describe('DateField', function () {
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
           expect(document.activeElement).toBe(within(group).getAllByRole('spinbutton')[0]);
-
           await user.keyboard('[ArrowRight][ArrowRight]2024');
 
           expect(getDescription()).toContain('Invalid value');
-          expect(input.validity.valid).toBe(true);
-
+          expect(input.validity.valid).toBe(false);
+          
           await user.tab();
 
           expect(getDescription()).not.toContain('Invalid value');
@@ -605,10 +612,12 @@ describe('DateField', function () {
           await user.keyboard('232023');
 
           expect(group).toHaveAttribute('aria-describedby');
-          expect(input.validity.valid).toBe(true);
+          expect(input.validity.valid).toBe(false);
 
           await user.tab();
           expect(getDescription()).not.toContain('Constraints not satisfied');
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(true);
         });
       });
 
@@ -626,13 +635,13 @@ describe('DateField', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
 
-          await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp][Tab]');
           expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
-          await user.keyboard('[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]');
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp][Tab]');
           expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
-          await user.keyboard('[ArrowDown]');
+          await user.keyboard('[Tab][Tab][Tab][ArrowDown][Tab]');
           expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
         });
 
@@ -650,7 +659,7 @@ describe('DateField', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Invalid value');
 
-          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
           expect(getDescription()).not.toContain('Invalid value');
         });