refactor(experience): improve date field backspace behavior and tests (#7708)

Author: charIeszhao

packages/experience/src/components/InputFields/DateField/index.test.tsx

@@ -81,7 +81,7 @@ describe('DateField Component', () => {
     expect(inputs[2]!.value).toBe('2023');
   });
 
-  test('backspace clears previous field when empty', () => {
+  test('backspace deletes one character; moves to previous field when caret at start', () => {
     const handleChange = jest.fn();
     const { container } = render(
       <Controlled
@@ -98,28 +98,93 @@ describe('DateField Component', () => {
       fireEvent.click(labelNode!);
     });
     const inputs = Array.from(container.querySelectorAll('input'));
+    const month = inputs[0]!;
+    const day = inputs[1]!;
+    const year = inputs[2]!;
 
-    // Focus last input and clear it with backspace until it moves to previous
-    act(() => {
-      inputs[2]!.focus();
-      fireEvent.keyDown(inputs[2]!, { key: 'Backspace' }); // Clears year
-    });
+    // Initial assertions
+    expect(month.value).toBe('08');
+    expect(day.value).toBe('20');
+    expect(year.value).toBe('2023');
+
+    const deleteLastChar = (input: HTMLInputElement) => {
+      const current = input.value;
+      const next = current.slice(0, -1);
+      act(() => {
+        fireEvent.keyDown(input, { key: 'Backspace' });
+        // Simulate browser applying new value (Backspace default behavior)
+        fireEvent.input(input, { target: { value: next } });
+      });
+    };
+
+    // Delete year digits one by one
+    year.focus();
+    deleteLastChar(year); // 2023 -> 202
+    expect(handleChange).toHaveBeenLastCalledWith('08/20/202');
+    deleteLastChar(year); // 202 -> 20
+    expect(handleChange).toHaveBeenLastCalledWith('08/20/20');
+    deleteLastChar(year); // 20 -> 2
+    expect(handleChange).toHaveBeenLastCalledWith('08/20/2');
+    deleteLastChar(year); // 2 -> '' (becomes 08/20/)
     expect(handleChange).toHaveBeenLastCalledWith('08/20/');
 
-    // Now last input is empty, backspace again should move to previous and clear day
+    // Current (year) empty; Backspace now should move to previous (day) and delete its last char
     act(() => {
-      fireEvent.keyDown(inputs[2]!, { key: 'Backspace' });
+      fireEvent.keyDown(year, { key: 'Backspace' });
     });
+    expect(handleChange).toHaveBeenLastCalledWith('08/2/');
+    expect(document.activeElement).toBe(day);
+
+    // Delete remaining day digit via single-char deletion
+    deleteLastChar(day); // 2 -> '' => 08//
     expect(handleChange).toHaveBeenLastCalledWith('08//');
 
-    // Finally clear the month field so that all parts empty => '' (not '//')
+    // Backspace on empty day moves to month and deletes one char (08 -> 0)
     act(() => {
-      inputs[0]!.focus();
-      fireEvent.keyDown(inputs[0]!, { key: 'Backspace' });
+      fireEvent.keyDown(day, { key: 'Backspace' });
     });
+    expect(handleChange).toHaveBeenLastCalledWith('0//');
+    expect(document.activeElement).toBe(month);
+
+    // Delete last month digit
+    deleteLastChar(month); // 0 -> '' => all empty -> '' (not '//')
     expect(handleChange).toHaveBeenLastCalledWith('');
-    const emittedValuesAfterFullClear = handleChange.mock.calls.map((call) => call[0]);
-    expect(emittedValuesAfterFullClear.includes('//')).toBe(false);
+
+    const emittedValues = handleChange.mock.calls.map((call) => call[0]);
+    // Ensure no final dangling '//' value
+    expect(emittedValues.filter((value) => value === '//')).toHaveLength(0);
+  });
+
+  test('backspace at start of non-empty field moves to previous and deletes last char there', () => {
+    const handleChange = jest.fn();
+    const { container } = render(
+      <Controlled
+        dateFormat={SupportedDateFormat.US}
+        value="08/20/2023"
+        label="Date of birth"
+        onChange={handleChange}
+      />
+    );
+    const labelNode = Array.from(container.querySelectorAll('*')).find(
+      (element) => element.textContent === 'Date of birth'
+    );
+    act(() => {
+      fireEvent.click(labelNode!);
+    });
+    const inputs = Array.from(container.querySelectorAll('input'));
+    const day = inputs[1]!; // Value '20'
+    const month = inputs[0]!; // Value '08'
+    // Place caret at start of day input
+    act(() => {
+      day.focus();
+      // Simulate caret at start
+      day.setSelectionRange(0, 0);
+      fireEvent.keyDown(day, { key: 'Backspace' });
+    });
+    // Should have deleted last char of month (08 -> 0) keeping day intact
+    expect(handleChange).toHaveBeenLastCalledWith('0/20/2023');
+    expect(month.value).toBe('0');
+    expect(day.value).toBe('20');
   });
 
   test('paste distributes digits across inputs', () => {

packages/experience/src/components/InputFields/DateField/index.tsx

@@ -108,7 +108,13 @@ const DateField = (props: Props) => {
 
   const updateValue = useCallback(
     (data: string, targetId: number) => {
-      if (!formatConfig || !isNumeric(data)) {
+      if (data === '') {
+        const clearedParts = dateParts.map((part, index) => (index === targetId ? '' : part));
+        handleOnChange(clearedParts);
+        return;
+      }
+
+      if (!isNumeric(data)) {
         return;
       }
 
@@ -121,7 +127,7 @@ const DateField = (props: Props) => {
           return currentParts;
         }
 
-        const fieldMaxLength = formatConfig.maxLengths[currentTargetId] ?? 0;
+        const fieldMaxLength = formatConfig?.maxLengths[currentTargetId] ?? 0;
         const fieldData = remainingData.slice(0, fieldMaxLength);
         const updatedParts = currentParts.map((part, index) =>
           index === currentTargetId ? fieldData : part
@@ -200,17 +206,24 @@ const DateField = (props: Props) => {
 
       switch (key) {
         case 'Backspace': {
-          event.preventDefault();
+          const caretAtStart = target.selectionStart === 0 && target.selectionEnd === 0;
 
-          if (value) {
-            const clearedParts = dateParts.map((part, index) => (index === targetId ? '' : part));
-            handleOnChange(clearedParts);
-          } else if (previousTarget) {
-            previousTarget.focus();
-            const clearedParts = dateParts.map((part, index) =>
-              index === targetId - 1 ? '' : part
+          if (caretAtStart && previousTarget) {
+            event.preventDefault();
+            const previousValue = previousTarget.value;
+
+            if (!previousValue) {
+              previousTarget.focus();
+              return;
+            }
+
+            const newPreviousValue = previousValue.slice(0, -1);
+            const updatedParts = dateParts.map((part, index) =>
+              index === targetId - 1 ? newPreviousValue : part
             );
-            handleOnChange(clearedParts);
+            handleOnChange(updatedParts);
+            previousTarget.focus();
+            previousTarget.setSelectionRange(newPreviousValue.length, newPreviousValue.length);
           }
           break;
         }