fix: ensure that clearing a partially entered date doesnt autofill the datefield (#8549)

Author: LFDanLu

packages/@react-stately/datepicker/src/useDateFieldState.ts

@@ -264,8 +264,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
       setPlaceholderDate(createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone));
       setValidSegments({});
     } else if (
-      validKeys.length === 0 || 
-      validKeys.length >= allKeys.length || 
+      (validKeys.length === 0 && clearedSegment.current == null) ||
+      validKeys.length >= allKeys.length ||
       (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== 'dayPeriod')
     ) {
       // If the field was empty (no valid segments) or all segments are completed, commit the new value.
@@ -286,8 +286,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   };
 
   let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
-  let segments = useMemo(() => 
-    processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity), 
+  let segments = useMemo(() =>
+    processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity),
     [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity]);
 
   // When the era field appears, mark it valid if the year field is already valid.
@@ -452,9 +452,9 @@ function processSegments(dateValue, validSegments, dateFormatter, resolvedOption
 
     // There is an issue in RTL languages where time fields render (minute:hour) instead of (hour:minute).
     // To force an LTR direction on the time field since, we wrap the time segments in LRI (left-to-right) isolate unicode. See https://www.w3.org/International/questions/qa-bidi-unicode-controls.
-    // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change. 
+    // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change.
     if (type === 'hour') {
-      // This marks the start of the embedded direction change. 
+      // This marks the start of the embedded direction change.
       processedSegments.push({
         type: 'literal',
         text: '\u2066',
@@ -487,7 +487,7 @@ function processSegments(dateValue, validSegments, dateFormatter, resolvedOption
         isEditable: false
       });
     } else {
-      // We only want to "wrap" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal. 
+      // We only want to "wrap" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal.
       processedSegments.push(dateSegment);
     }
   }

packages/react-aria-components/test/DateField.test.js

@@ -427,4 +427,30 @@ describe('DateField', () => {
     let input = getByRole('group');
     expect(input).toHaveTextContent('5/30/2000');
   });
+
+  it('should reset to placeholders when deleting a partially filled DateField', async () => {
+    let {getAllByRole} = render(
+      <DateField>
+        <Label>Date</Label>
+        <DateInput>
+          {segment => <DateSegment segment={segment} />}
+        </DateInput>
+      </DateField>
+    );
+
+    let segements = getAllByRole('spinbutton');
+    let monthSegment = segements[0];
+    expect(monthSegment).toHaveTextContent('mm');
+    await user.click(monthSegment);
+    expect(monthSegment).toHaveFocus();
+    await user.keyboard('11');
+    expect(monthSegment).toHaveTextContent('11');
+
+    await user.click(monthSegment);
+    await user.keyboard('{backspace}');
+    await user.keyboard('{backspace}');
+    expect(monthSegment).toHaveTextContent('mm');
+    expect(segements[1]).toHaveTextContent('dd');
+    expect(segements[2]).toHaveTextContent('yyyy');
+  });
 });