[LG-5504] feat(input-box): Add segment focus behavior

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

@@ -8,7 +8,10 @@ import React, {
 import isNull from 'lodash/isNull';
 
 import { isInvalidDateObject, isSameUTCDay } from '@leafygreen-ui/date-utils';
-import { isElementInputSegment } from '@leafygreen-ui/input-box';
+import {
+  focusAndSelectSegment,
+  isElementInputSegment,
+} from '@leafygreen-ui/input-box';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';
 
 import {
@@ -20,7 +23,6 @@ import { DateInputSegmentChangeEventHandler } from '../../shared/components/Date
 import { useSharedDatePickerContext } from '../../shared/context';
 import { getFormattedDateStringFromSegments } from '../../shared/utils';
 import { useDatePickerContext } from '../DatePickerContext';
-import { getSegmentToFocus } from '../utils/getSegmentToFocus';
 
 import { DatePickerInputProps } from './DatePickerInput.types';
 
@@ -77,14 +79,17 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
       if (!disabled) {
         openMenu(e);
         const { target } = e;
-        const segmentToFocus = getSegmentToFocus({
+
+        /**
+         * Focus and select the appropriate segment.
+         *
+         * This is done here instead of `InputBox` because this component has padding that needs to be accounted for on click.
+         */
+        focusAndSelectSegment({
           target,
           formatParts,
           segmentRefs,
         });
-
-        segmentToFocus?.focus();
-        segmentToFocus?.select();
       }
     };
 

packages/date-picker/src/shared/utils/index.ts

@@ -1,7 +1,6 @@
 export { doesSomeSegmentExist } from './doesSomeSegmentExist';
 export { doSegmentsFormValidDate } from './doSegmentsFormValidDate';
 export { getAutoComplete } from './getAutoComplete';
-export { getFirstEmptySegment } from './getFirstEmptySegment';
 export { getFormatParts, getFormatter } from './getFormatParts';
 export {
   getFormattedDateString,

packages/input-box/src/InputSegment/InputSegment.stories.tsx

@@ -71,6 +71,8 @@ const meta: StoryMetaType<typeof InputSegment, InputSegmentStoryProps> = {
         segment: ['day', 'year'],
         size: Object.values(Size),
         value: ['', '2', '02', '0', '00', '2025', '0000'],
+        // @ts-expect-error - data-focus is not a valid prop for InputSegment
+        'data-focus': [false, true],
       },
       excludeCombinations: [
         {
@@ -81,6 +83,13 @@ const meta: StoryMetaType<typeof InputSegment, InputSegmentStoryProps> = {
           value: ['2025', '0000'],
           segment: ['day'],
         },
+        [
+          // @ts-expect-error - data-focus is not a valid prop for InputSegment
+          'data-focus',
+          {
+            value: ['02', '0', '00', '2025', '0000'],
+          },
+        ],
       ],
       decorator: (StoryFn, context) => (
         <LeafyGreenProvider darkMode={context?.args.darkMode}>

packages/input-box/src/InputSegment/InputSegment.styles.ts

@@ -28,7 +28,8 @@ export const baseStyles = css`
   -moz-appearance: textfield; /* Firefox */
   appearance: textfield;
 
-  &:focus {
+  &:focus,
+  &[data-focus='true'] {
     outline: none;
   }
 `;
@@ -44,7 +45,8 @@ export const getSegmentThemeStyles = (theme: Theme) => {
       ]};
     }
 
-    &:focus {
+    &:focus,
+    &[data-focus='true'] {
       background-color: ${color[theme].background[Variant.Primary][
         InteractionState.Focus
       ]};

packages/input-box/src/index.ts

@@ -9,11 +9,11 @@ export {
 export {
   createExplicitSegmentValidator,
   type ExplicitSegmentRule,
+  focusAndSelectSegment,
+  getSegmentToFocus,
+  getValueFormatter,
   isElementInputSegment,
-  isValidValueForSegment,
-} from './utils';
-export { getValueFormatter } from './utils/getValueFormatter/getValueFormatter';
-export {
   isValidSegmentName,
   isValidSegmentValue,
-} from './utils/isValidSegment/isValidSegment';
+  isValidValueForSegment,
+} from './utils';

packages/input-box/src/utils/focusAndSelectSegment/focusAndSelectSegment.spec.tsx

@@ -0,0 +1,161 @@
+import { createRef } from 'react';
+
+import { SegmentRefsType } from '../getSegmentToFocus/getSegmentToFocus';
+
+import { focusAndSelectSegment } from './focusAndSelectSegment';
+
+describe('packages/input-box/utils/focusAndSelectSegment', () => {
+  const formatParts: Array<Intl.DateTimeFormatPart> = [
+    { type: 'year', value: '' },
+    { type: 'literal', value: '-' },
+    { type: 'month', value: '' },
+    { type: 'literal', value: '-' },
+    { type: 'day', value: '' },
+  ];
+
+  test('focuses and selects the target segment when target is a segment', () => {
+    const target = document.createElement('input');
+    const focusSpy = jest.spyOn(target, 'focus');
+    const selectSpy = jest.spyOn(target, 'select');
+
+    const segmentRefs: SegmentRefsType = {
+      year: createRef(),
+      month: createRef(),
+      day: { current: target },
+    };
+
+    focusAndSelectSegment({
+      target,
+      formatParts,
+      segmentRefs,
+    });
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+    expect(selectSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses and selects the first empty segment when target is not a segment', () => {
+    const yearSegment = document.createElement('input');
+    const monthSegment = document.createElement('input');
+    monthSegment.value = '12';
+    const daySegment = document.createElement('input');
+    daySegment.value = '26';
+
+    const yearFocusSpy = jest.spyOn(yearSegment, 'focus');
+    const yearSelectSpy = jest.spyOn(yearSegment, 'select');
+
+    const target = document.createElement('div');
+
+    const segmentRefs: SegmentRefsType = {
+      year: { current: yearSegment },
+      month: { current: monthSegment },
+      day: { current: daySegment },
+    };
+
+    focusAndSelectSegment({
+      target,
+      formatParts,
+      segmentRefs,
+    });
+
+    expect(yearFocusSpy).toHaveBeenCalledTimes(1);
+    expect(yearSelectSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('focuses and selects the last filled segment when target is not a segment', () => {
+    const yearSegment = document.createElement('input');
+    yearSegment.value = '1993';
+    const monthSegment = document.createElement('input');
+    monthSegment.value = '12';
+    const daySegment = document.createElement('input');
+    daySegment.value = '26';
+
+    const dayFocusSpy = jest.spyOn(daySegment, 'focus');
+    const daySelectSpy = jest.spyOn(daySegment, 'select');
+
+    const target = document.createElement('div');
+
+    const segmentRefs: SegmentRefsType = {
+      year: { current: yearSegment },
+      month: { current: monthSegment },
+      day: { current: daySegment },
+    };
+
+    focusAndSelectSegment({
+      target,
+      formatParts,
+      segmentRefs,
+    });
+
+    expect(dayFocusSpy).toHaveBeenCalledTimes(1);
+    expect(daySelectSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('Does not focus or select any segment when target is undefined', () => {
+    const yearSegment = document.createElement('input');
+    const monthSegment = document.createElement('input');
+    const daySegment = document.createElement('input');
+
+    const yearFocusSpy = jest.spyOn(yearSegment, 'focus');
+    const yearSelectSpy = jest.spyOn(yearSegment, 'select');
+
+    const monthFocusSpy = jest.spyOn(monthSegment, 'focus');
+    const monthSelectSpy = jest.spyOn(monthSegment, 'select');
+    const dayFocusSpy = jest.spyOn(daySegment, 'focus');
+    const daySelectSpy = jest.spyOn(daySegment, 'select');
+
+    const segmentRefs: SegmentRefsType = {
+      year: { current: yearSegment },
+      month: { current: monthSegment },
+      day: { current: daySegment },
+    };
+
+    focusAndSelectSegment({
+      target: undefined,
+      formatParts,
+      segmentRefs,
+    });
+
+    expect(yearFocusSpy).not.toHaveBeenCalled();
+    expect(yearSelectSpy).not.toHaveBeenCalled();
+    expect(monthFocusSpy).not.toHaveBeenCalled();
+    expect(monthSelectSpy).not.toHaveBeenCalled();
+    expect(dayFocusSpy).not.toHaveBeenCalled();
+    expect(daySelectSpy).not.toHaveBeenCalled();
+  });
+
+  test('Does not focus or select any segment when formatParts is undefined', () => {
+    const yearSegment = document.createElement('input');
+    const monthSegment = document.createElement('input');
+    const daySegment = document.createElement('input');
+
+    const yearFocusSpy = jest.spyOn(yearSegment, 'focus');
+    const yearSelectSpy = jest.spyOn(yearSegment, 'select');
+
+    const monthFocusSpy = jest.spyOn(monthSegment, 'focus');
+    const monthSelectSpy = jest.spyOn(monthSegment, 'select');
+    const dayFocusSpy = jest.spyOn(daySegment, 'focus');
+    const daySelectSpy = jest.spyOn(daySegment, 'select');
+
+    const target = document.createElement('div');
+
+    const segmentRefs: SegmentRefsType = {
+      year: { current: yearSegment },
+      month: { current: monthSegment },
+      day: { current: daySegment },
+    };
+
+    focusAndSelectSegment({
+      target,
+      formatParts: undefined,
+      segmentRefs,
+    });
+
+    expect(yearFocusSpy).not.toHaveBeenCalled();
+    expect(yearSelectSpy).not.toHaveBeenCalled();
+    expect(monthFocusSpy).not.toHaveBeenCalled();
+    expect(monthSelectSpy).not.toHaveBeenCalled();
+    expect(dayFocusSpy).not.toHaveBeenCalled();
+    expect(daySelectSpy).not.toHaveBeenCalled();
+  });
+});