Remove unsupported autoSelectNext date input feature

Author: colinrotherham

src/components/form-elements/date-input/DateInput.tsx

@@ -20,7 +20,6 @@ export type DateInputChangeEvent = ChangeEvent<
 interface DateInputProps
   extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'defaultValue'>,
     FormElementProps {
-  autoSelectNext?: boolean;
   value?: Partial<DateInputValue>;
   defaultValue?: Partial<DateInputValue>;
   onChange?: (e: DateInputChangeEvent) => void;
@@ -29,15 +28,12 @@ interface DateInputProps
 type InputType = 'day' | 'month' | 'year';
 
 const DateInputComponent = ({
-  autoSelectNext,
   children,
   onChange,
   value,
   defaultValue,
   ...rest
 }: DateInputProps) => {
-  let monthRef: HTMLInputElement | null = null;
-  let yearRef: HTMLInputElement | null = null;
   const [internalDate, setInternalDate] = useState<Record<InputType, string>>({
     day: value?.day ?? '',
     month: value?.month ?? '',
@@ -54,19 +50,7 @@ const DateInputComponent = ({
     return setInternalDate(newState);
   }, [value]);
 
-  const handleFocusNextInput = (inputType: InputType, value: string): void => {
-    if (!autoSelectNext) return;
-    if (inputType === 'day' && value.length === 2 && monthRef) {
-      monthRef.focus();
-    } else if (inputType === 'month' && value.length === 2 && yearRef) {
-      yearRef.focus();
-    }
-  };
-
   const handleChange = (inputType: InputType, event: ChangeEvent<HTMLInputElement>): void => {
-    handleFocusNextInput(inputType, event.target.value);
-    event.stopPropagation();
-
     const newEventValue: DateInputValue = {
       ...internalDate,
       [inputType]: event.target.value,
@@ -82,26 +66,20 @@ const DateInputComponent = ({
     setInternalDate(newEventValue);
   };
 
-  const registerRef = (inputType: InputType, ref: HTMLInputElement | null): void => {
-    if (inputType === 'month') monthRef = ref;
-    if (inputType === 'year') yearRef = ref;
-  };
-
   return (
     <SingleInputFormGroup<Omit<DateInputProps, 'value' | 'defaultValue'>>
       inputType="dateinput"
       {...rest}
     >
       {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
-      {({ className, name, id, error, autoSelectNext, ...restRenderProps }) => {
+      {({ className, name, id, error, ...restRenderProps }) => {
         const contextValue: IDateInputContext = {
           id,
           name,
           error,
           value,
           defaultValue,
           handleChange,
-          registerRef,
         };
         return (
           <div className={classNames('nhsuk-date-input', className)} {...restRenderProps} id={id}>

src/components/form-elements/date-input/DateInputContext.ts

@@ -6,15 +6,13 @@ export type IDateInputContext = {
   error: string | boolean | undefined;
   value?: { day?: string; month?: string; year?: string };
   defaultValue?: { day?: string; month?: string; year?: string };
-  registerRef: (inputType: 'day' | 'month' | 'year', ref: null | HTMLInputElement) => void;
   handleChange: (inputType: 'day' | 'month' | 'year', event: ChangeEvent<HTMLInputElement>) => void;
 };
 
 const DateInputContext = createContext<IDateInputContext>({
   /* eslint-disable @typescript-eslint/no-empty-function */
   id: '',
   name: '',
-  registerRef: () => {},
   handleChange: () => {},
   error: undefined,
 });

src/components/form-elements/date-input/__tests__/DateInput.test.tsx

@@ -9,62 +9,6 @@ describe('DateInput', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it.each`
-    autoSelectNext | inputValue | monthFocusExpected
-    ${false}       | ${'1'}     | ${false}
-    ${false}       | ${'11'}    | ${false}
-    ${true}        | ${'1'}     | ${false}
-    ${true}        | ${'11'}    | ${true}
-  `(
-    'When autoSelectNext is $autoSelectNext, the day input value is $inputValue, then month focus is expected to be $monthFocusExpected',
-    ({ autoSelectNext, inputValue, monthFocusExpected }) => {
-      const { container } = render(
-        <DateInput id="testInput" name="testInput" autoSelectNext={autoSelectNext} />,
-      );
-
-      const dayInput = container.querySelector('#testInput-day')!;
-      const monthInput = container.querySelector('#testInput-month')!;
-
-      expect(monthInput).not.toHaveFocus();
-
-      fireEvent.change(dayInput, { target: { value: inputValue } });
-
-      if (monthFocusExpected) {
-        expect(monthInput).toHaveFocus();
-      } else {
-        expect(monthInput).not.toHaveFocus();
-      }
-    },
-  );
-
-  it.each`
-    autoSelectNext | inputValue | yearFocusExpected
-    ${false}       | ${'1'}     | ${false}
-    ${false}       | ${'11'}    | ${false}
-    ${true}        | ${'1'}     | ${false}
-    ${true}        | ${'11'}    | ${true}
-  `(
-    'When autoSelectNext is $autoSelectNext, the day input value is $inputValue, then year focus is expected to be $yearFocusExpected',
-    ({ autoSelectNext, inputValue, yearFocusExpected }) => {
-      const { container } = render(
-        <DateInput id="testInput" name="testInput" autoSelectNext={autoSelectNext} />,
-      );
-
-      const monthInput = container.querySelector('#testInput-month')!;
-      const yearInput = container.querySelector('#testInput-year')!;
-
-      expect(yearInput).not.toHaveFocus();
-
-      fireEvent.change(monthInput, { target: { value: inputValue } });
-
-      if (yearFocusExpected) {
-        expect(yearInput).toHaveFocus();
-      } else {
-        expect(yearInput).not.toHaveFocus();
-      }
-    },
-  );
-
   it('Invokes the provided onChange function prop if provided', () => {
     let onChangeParam: DateInputChangeEvent | null = null;
     const onChange = jest.fn().mockImplementation((val) => (onChangeParam = val));

stories/Form Elements/DateInput.stories.tsx

@@ -60,20 +60,6 @@ export const StandardWithError: Story = {
   ),
 };
 
-export const StandardWithAutoSelect: Story = {
-  render: () => (
-    <div style={{ padding: 20 }}>
-      <h2>Scenario: autoSelectNext prop is set to enable the auto focus functionality</h2>
-      <h5>Expected Behaviour</h5>
-      <ul className="nhsuk-hint">
-        <li>When day field has 2 or month field has 2 characters, the next field is focused</li>
-      </ul>
-      <h5>Component</h5>
-      <DateInput autoSelectNext />
-    </div>
-  ),
-};
-
 export const PrePopulatedIndividualComponents: Story = {
   render: () => {
     const defaultValue = { day: '20', month: '09', year: '1996' };