Date Picker [LG-3897] backspace (#2143)

* add tests * move test
mongodb · Dec 18, 2023 · ab16f9e · ab16f9e
1 parent 95af767
commit ab16f9e
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 30 deletions.
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1250,6 +1250,26 @@ describe('packages/date-picker', () => {
        */
       describe('Arrow key', () => {
         describe('Input', () => {
+          describe('Left Arrow', () => {
+            test('moves the cursor when the value starts with 0', () => {
+              const { monthInput } = renderDatePicker({});
+              userEvent.type(monthInput, '04{arrowleft}{arrowleft}');
+              expect(monthInput).toHaveFocus();
+            });
+
+            test('moves the cursor when the value is 0', () => {
+              const { monthInput } = renderDatePicker({});
+              userEvent.type(monthInput, '0{arrowleft}');
+              expect(monthInput).toHaveFocus();
+            });
+
+            test('moves the cursor to the next segment when the value is 0', () => {
+              const { yearInput, monthInput } = renderDatePicker({});
+              userEvent.type(monthInput, '0{arrowleft}{arrowleft}');
+              expect(yearInput).toHaveFocus();
+            });
+          });
+
           test('right arrow moves focus through segments', () => {
             const { yearInput, monthInput, dayInput } = renderDatePicker();
             userEvent.click(yearInput);
@@ -2122,37 +2142,59 @@ describe('packages/date-picker', () => {
       });
 
       describe('updating a segment', () => {
-        test('clearing the segment updates the input', () => {
-          const { yearInput, monthInput, dayInput } = renderDatePicker({});
-          userEvent.type(yearInput, '2020');
-          userEvent.type(monthInput, '7');
-          userEvent.type(dayInput, '4');
+        describe('backspace', () => {
+          test('clearing the segment updates the input', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker({});
+            userEvent.type(yearInput, '2020');
+            userEvent.type(monthInput, '7');
+            userEvent.type(dayInput, '4');
 
-          yearInput.setSelectionRange(0, 4);
-          userEvent.type(yearInput, '{backspace}');
-          expect(yearInput).toHaveValue('');
-        });
+            yearInput.setSelectionRange(0, 4);
+            userEvent.type(yearInput, '{backspace}');
+            expect(yearInput).toHaveValue('');
+          });
 
-        test('clearing and typing a new value does not format the input', () => {
-          const { yearInput, monthInput, dayInput } = renderDatePicker({});
-          userEvent.type(yearInput, '2020');
-          userEvent.type(monthInput, '7');
-          userEvent.type(dayInput, '4');
+          test('keeps the focus inside the segment if it is not empty', () => {
+            const { monthInput } = renderDatePicker({});
 
-          yearInput.setSelectionRange(0, 4);
-          userEvent.type(yearInput, '{backspace}');
-          userEvent.type(yearInput, '2');
-          expect(yearInput).toHaveValue('2');
-        });
+            userEvent.type(monthInput, '0');
+            userEvent.type(monthInput, '{backspace}');
 
-        test('deleting characters does not format the segment', () => {
-          const { yearInput, monthInput, dayInput } = renderDatePicker({});
-          userEvent.type(yearInput, '2020');
-          userEvent.type(monthInput, '7');
-          userEvent.type(dayInput, '4');
+            expect(monthInput).toHaveValue('');
+            expect(monthInput).toHaveFocus();
+          });
+
+          test('moves the focus to the next segment', () => {
+            const { yearInput, monthInput } = renderDatePicker({});
+
+            userEvent.type(monthInput, '0');
+            userEvent.type(monthInput, '{backspace}{backspace}');
+
+            expect(monthInput).toHaveValue('');
+            expect(yearInput).toHaveFocus();
+          });
 
-          userEvent.type(yearInput, '{backspace}{backspace}');
-          expect(yearInput).toHaveValue('20');
+          test('clearing and typing a new value does not format the input', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker({});
+            userEvent.type(yearInput, '2020');
+            userEvent.type(monthInput, '7');
+            userEvent.type(dayInput, '4');
+
+            yearInput.setSelectionRange(0, 4);
+            userEvent.type(yearInput, '{backspace}');
+            userEvent.type(yearInput, '2');
+            expect(yearInput).toHaveValue('2');
+          });
+
+          test('deleting characters does not format the segment', () => {
+            const { yearInput, monthInput, dayInput } = renderDatePicker({});
+            userEvent.type(yearInput, '2020');
+            userEvent.type(monthInput, '7');
+            userEvent.type(dayInput, '4');
+
+            userEvent.type(yearInput, '{backspace}{backspace}');
+            expect(yearInput).toHaveValue('20');
+          });
         });
 
         describe('typing new characters', () => {

diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 
 import { isSameUTCDay } from '@leafygreen-ui/date-utils';
-import { isZeroLike } from '@leafygreen-ui/lib';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import { DateFormField, DateInputBox } from '../../shared/components/DateInput';
@@ -88,7 +87,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       // if target is not a segment, do nothing
       if (!isSegment) return;
 
-      const isSegmentEmpty = isZeroLike(target.value);
+      const isSegmentEmpty = !target.value;
 
       const { selectionStart, selectionEnd } = target;
 
@@ -97,7 +96,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // if input is empty,
           // or the cursor is at the beginning of the input
           // set focus to prev. input (if it exists)
-          if (isSegmentEmpty || selectionStart === 0) {
+          if (selectionStart === 0) {
             const segmentToFocus = getRelativeSegmentRef('prev', {
               segment: target,
               formatParts,
@@ -115,7 +114,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           // if input is empty,
           // or the cursor is at the end of the input
           // set focus to next. input (if it exists)
-          if (isSegmentEmpty || selectionEnd === target.value.length) {
+          if (selectionEnd === target.value.length) {
             const segmentToFocus = getRelativeSegmentRef('next', {
               segment: target,
               formatParts,
@@ -137,6 +136,8 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
         case keyMap.Backspace: {
           if (isSegmentEmpty) {
+            // prevent the backspace in the previous segment
+            e.preventDefault();
             const segmentToFocus = getRelativeSegmentRef('prev', {
               segment: target,
               formatParts,