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,7 +28,6 @@ interface DateInputProps
 type InputType = 'day' | 'month' | 'year';
 
 const DateInputComponent = ({
-  autoSelectNext,
   children,
   onChange,
   value,
@@ -54,19 +52,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,
@@ -93,7 +79,7 @@ const DateInputComponent = ({
       {...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,

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' };