LG-3896, LG-3898: Date Picker input selection

.changeset/eight-beds-smash.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/date-picker': minor
+---
+
+Changes the behavior of segments. Add more details.

packages/date-picker/src/DatePicker.stories.tsx

@@ -112,7 +112,7 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
         onDateChange={v => {
           // eslint-disable-next-line no-console
           console.log('Storybook: onDateChange', {
-            value: v!.toUTCString(),
+            value: v && v.toUTCString(),
             'value with local browser timezone': v,
           });
           setValue(v);
@@ -123,6 +123,10 @@ export const LiveExample: StoryFn<typeof DatePicker> = props => {
             'date with local browser timezone': date,
           })
         }
+        onChange={e =>
+          // eslint-disable-next-line no-console
+          console.log('Storybook: onChange🚨', { value: e.target.value })
+        }
       />
       <br />
       <Overline>Current value</Overline>

packages/date-picker/src/DatePicker/DatePicker.spec.tsx

@@ -1423,16 +1423,21 @@ describe('packages/date-picker', () => {
         test('deletes any value in the input', () => {
           const { dayInput } = renderDatePicker();
           userEvent.type(dayInput, '26{backspace}');
-          expect(dayInput.value).toBe('2');
-          userEvent.tab();
-          expect(dayInput.value).toBe('02');
+          expect(dayInput.value).toBe('');
         });
 
-        test('deletes the whole value on multiple presses', () => {
+        test('keeps the focus in the current input', () => {
           const { monthInput } = renderDatePicker();
           userEvent.type(monthInput, '11');
+          userEvent.type(monthInput, '{backspace}');
+          expect(monthInput).toHaveFocus();
+        });
+
+        test('focuses the previous segment after pressing backspace twice', () => {
+          const { monthInput, yearInput } = renderDatePicker();
+          userEvent.type(monthInput, '11');
           userEvent.type(monthInput, '{backspace}{backspace}');
-          expect(monthInput.value).toBe('');
+          expect(yearInput).toHaveFocus();
         });
 
         test('focuses the previous segment if current segment is empty', () => {
@@ -1455,39 +1460,12 @@ describe('packages/date-picker', () => {
               expect(yearInput).toHaveFocus();
             });
 
-            test('moves the cursor when the segment has a value', () => {
-              const { monthInput } = renderDatePicker({
-                value: testToday,
-              });
-              userEvent.click(monthInput);
-              userEvent.keyboard('{arrowleft}');
-              expect(monthInput).toHaveFocus();
-            });
-
-            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 previous segment when the value is 0', () => {
-              const { yearInput, monthInput } = renderDatePicker({});
-              userEvent.type(monthInput, '0{arrowleft}{arrowleft}');
-              expect(yearInput).toHaveFocus();
-            });
-
-            test('focuses the previous segment if the cursor is at the start of the input text', () => {
+            test('focuses the previous segment when the segment has a value', () => {
               const { yearInput, monthInput } = renderDatePicker({
                 value: testToday,
               });
               userEvent.click(monthInput);
-              userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
+              userEvent.keyboard('{arrowleft}');
               expect(yearInput).toHaveFocus();
             });
           });
@@ -1500,7 +1478,7 @@ describe('packages/date-picker', () => {
               expect(monthInput).toHaveFocus();
             });
 
-            test('focuses the next segment if the cursor is at the start of the input text', () => {
+            test('focuses the next segment when the segment has a value', () => {
               const { yearInput, monthInput } = renderDatePicker({
                 value: testToday,
               });
@@ -1509,13 +1487,10 @@ describe('packages/date-picker', () => {
               expect(monthInput).toHaveFocus();
             });
 
-            test('moves the cursor when the segment has a value', () => {
-              const { yearInput } = renderDatePicker({
-                value: testToday,
-              });
-              userEvent.click(yearInput);
-              userEvent.keyboard('{arrowleft}{arrowright}');
-              expect(yearInput).toHaveFocus();
+            test('focuses the next segment when the value starts with 0', () => {
+              const { monthInput, dayInput } = renderDatePicker({});
+              userEvent.type(monthInput, '0{arrowright}');
+              expect(dayInput).toHaveFocus();
             });
           });
 
@@ -3029,7 +3004,6 @@ describe('packages/date-picker', () => {
             userEvent.type(monthInput, '7');
             userEvent.type(dayInput, '4');
 
-            yearInput.setSelectionRange(0, 4);
             userEvent.type(yearInput, '{backspace}');
             userEvent.type(yearInput, '2');
             expect(yearInput).toHaveValue('2');
@@ -3041,27 +3015,26 @@ describe('packages/date-picker', () => {
             userEvent.type(monthInput, '7');
             userEvent.type(dayInput, '4');
 
-            userEvent.type(yearInput, '{backspace}{backspace}');
-            expect(yearInput).toHaveValue('20');
+            userEvent.type(yearInput, '{backspace}');
+            expect(yearInput).toHaveValue('');
           });
         });
 
         describe('typing new characters', () => {
-          test('even if the resulting value is valid, keeps the input as-is', async () => {
+          test('updates the value', async () => {
             const { monthInput } = renderDatePicker({});
             userEvent.type(monthInput, '1');
             userEvent.tab();
             await waitFor(() => expect(monthInput).toHaveValue('01'));
             userEvent.type(monthInput, '2');
-            await waitFor(() => expect(monthInput).toHaveValue('01'));
+            await waitFor(() => expect(monthInput).toHaveValue('02'));
           });
 
-          test('if the resulting value is not valid, keeps the input as-is', async () => {
+          test('if the resulting value is not valid, clears the input', async () => {
             const { monthInput } = renderDatePicker({});
-            userEvent.type(monthInput, '6');
-            await waitFor(() => expect(monthInput).toHaveValue('06'));
-            userEvent.type(monthInput, '9');
-            await waitFor(() => expect(monthInput).toHaveValue('06'));
+            userEvent.type(monthInput, '0');
+            userEvent.tab();
+            await waitFor(() => expect(monthInput).toHaveValue(''));
           });
         });
       });
@@ -3551,15 +3524,13 @@ describe('packages/date-picker', () => {
           userEvent.tab();
           errorElement = queryByTestId('lg-form_field-error_message');
           expect(errorElement).toHaveTextContent(
-            '2020-02-30 is not a valid date',
+            '2020-02- is not a valid date',
           );
 
           userEvent.type(dayInput, '{backspace}{backspace}');
           userEvent.tab();
           errorElement = queryByTestId('lg-form_field-error_message');
-          expect(errorElement).toHaveTextContent(
-            '2020-02- is not a valid date',
-          );
+          expect(errorElement).toHaveTextContent('2020-- is not a valid date');
         });
 
         test('Clearing the input after an invalid date error message is displayed removes the message', () => {

packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx

@@ -84,6 +84,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         });
 
         segmentToFocus?.focus();
+        segmentToFocus?.select();
       }
     };
 
@@ -108,40 +109,38 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
       const isSegmentEmpty = !target.value;
 
-      const { selectionStart, selectionEnd } = target;
-
       switch (key) {
         case keyMap.ArrowLeft: {
+          // Without this, the input does not select all the text
+          e.preventDefault();
           // if input is empty,
-          // or the cursor is at the beginning of the input
           // set focus to prev. input (if it exists)
-          if (selectionStart === 0) {
-            const segmentToFocus = getRelativeSegmentRef('prev', {
-              segment: target,
-              formatParts,
-              segmentRefs,
-            });
-
-            segmentToFocus?.current?.focus();
-          }
+          const segmentToFocus = getRelativeSegmentRef('prev', {
+            segment: target,
+            formatParts,
+            segmentRefs,
+          });
+
+          segmentToFocus?.current?.focus();
+          segmentToFocus?.current?.select();
           // otherwise, use default behavior
 
           break;
         }
 
         case keyMap.ArrowRight: {
+          // Without this, the input does not select all the text
+          e.preventDefault();
           // if input is empty,
-          // or the cursor is at the end of the input
           // set focus to next. input (if it exists)
-          if (selectionEnd === target.value.length) {
-            const segmentToFocus = getRelativeSegmentRef('next', {
-              segment: target,
-              formatParts,
-              segmentRefs,
-            });
-
-            segmentToFocus?.current?.focus();
-          }
+          const segmentToFocus = getRelativeSegmentRef('next', {
+            segment: target,
+            formatParts,
+            segmentRefs,
+          });
+
+          segmentToFocus?.current?.focus();
+          segmentToFocus?.current?.select();
           // otherwise, use default behavior
 
           break;
@@ -157,12 +156,14 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
           if (isSegmentEmpty) {
             // prevent the backspace in the previous segment
             e.preventDefault();
+
             const segmentToFocus = getRelativeSegmentRef('prev', {
               segment: target,
               formatParts,
               segmentRefs,
             });
             segmentToFocus?.current?.focus();
+            segmentToFocus?.current?.select();
           }
           break;
         }

packages/date-picker/src/DatePicker/utils/getSegmentToFocus/index.ts

@@ -24,7 +24,7 @@ export const getSegmentToFocus = ({
   target,
   formatParts,
   segmentRefs,
-}: GetSegmentToFocusProps): HTMLElement | undefined | null => {
+}: GetSegmentToFocusProps): HTMLInputElement | undefined | null => {
   if (
     isUndefined(target) ||
     isUndefined(formatParts) ||

packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.spec.tsx

@@ -214,18 +214,18 @@ describe('packages/date-picker/shared/date-input-box', () => {
         expect(dayInput.value).toBe('02');
       });
 
-      test('backspace deletes characters', () => {
+      test('backspace resets the input', () => {
         const { dayInput, yearInput } = renderDateInputBox(
           { value: null },
           testContext,
         );
         userEvent.type(dayInput, '21');
         userEvent.type(dayInput, '{backspace}');
-        expect(dayInput.value).toBe('2');
+        expect(dayInput.value).toBe('');
 
         userEvent.type(yearInput, '1993');
         userEvent.type(yearInput, '{backspace}');
-        expect(yearInput.value).toBe('199');
+        expect(yearInput.value).toBe('');
       });
 
       test('segment change handler is called when typing into a segment', () => {
@@ -255,17 +255,19 @@ describe('packages/date-picker/shared/date-input-box', () => {
         userEvent.type(dayInput, '21');
         userEvent.type(dayInput, '{backspace}');
         expect(onSegmentChange).toHaveBeenCalledWith(
-          expect.objectContaining({ value: '2' }),
+          expect.objectContaining({ value: '' }),
         );
       });
 
-      test('value setter is not called when deleting from a single segment', () => {
+      test('value setter is called when pressing backspace in a single segment', () => {
         const setValue = jest.fn();
 
         const { dayInput } = renderDateInputBox({ setValue }, testContext);
         userEvent.type(dayInput, '21');
         userEvent.type(dayInput, '{backspace}');
-        expect(setValue).not.toHaveBeenCalled();
+        expect(setValue).toHaveBeenCalledWith(
+          expect.objectContaining({ value: null }),
+        );
       });
     });
 
@@ -313,11 +315,11 @@ describe('packages/date-picker/shared/date-input-box', () => {
           },
           testContext,
         );
-        userEvent.type(dayInput, '{backspace}5');
+        userEvent.type(dayInput, '{backspace}');
         expect(setValue).toHaveBeenCalledWith(
-          expect.objectContaining(newUTC(1993, Month.December, 25)),
+          expect.objectContaining(new Date('invalid')),
         );
-        expect(dayInput).toHaveValue('25');
+        expect(dayInput).toHaveValue('');
       });
 
       test('value setter is _not_ called when new input is ambiguous', () => {
@@ -330,8 +332,8 @@ describe('packages/date-picker/shared/date-input-box', () => {
           testContext,
         );
         userEvent.type(dayInput, '{backspace}');
-        expect(setValue).not.toHaveBeenCalled();
-        expect(dayInput).toHaveValue('2');
+        expect(setValue).toHaveBeenCalled();
+        expect(dayInput).toHaveValue('');
       });
 
       test('value setter is called when the input is cleared', () => {

packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx

@@ -147,6 +147,7 @@ export const DateInputBox = React.forwardRef<HTMLDivElement, DateInputBoxProps>(
           if (nextSegmentName) {
             const nextSegmentRef = segmentRefs[nextSegmentName];
             nextSegmentRef?.current?.focus();
+            nextSegmentRef?.current?.select();
           }
         }