fix(datepicker): call onChangeDate when keyboard enter valid date(s) (#…

…254)
GovTechSG · Aug 14, 2024 · e4d6fbe · e4d6fbe
2 parents 6391227 + 1c44441
commit e4d6fbe
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 4 deletions.
diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
@@ -365,8 +365,9 @@ export const DatePicker: BsPrefixRefForwardingComponent<
       }));
       if (newSelectedDates.end) {
         dropdownToggleRef?.current?.click();
+        // onChangeDate calls only when both start and end dates are selected
+        props.onChangeDate?.(newSelectedDates);
       }
-      props.onChangeDate?.(newSelectedDates);
     };
 
     const focusOnDateCalendar = () => {
@@ -548,7 +549,8 @@ export const DatePicker: BsPrefixRefForwardingComponent<
           selectedDate: parsedDate,
           invalid: false,
         }));
-        updateFocusedDate(parsedDate);
+        updateFocusedDate(setTimeToNoon(parsedDate));
+        props.onChangeDate?.(setTimeToNoon(parsedDate));
         return;
       }
 
@@ -557,6 +559,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
         inputDate: enteredDate,
       }));
       updateFocusedDate(displayDate);
+
     };
 
     const enterDateRange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -600,13 +603,14 @@ export const DatePicker: BsPrefixRefForwardingComponent<
           ...prevState,
           inputDate: inputDate,
           selectedDate: {
-            start: dateStart,
-            end: dateEnd,
+            start: setTimeToNoon(dateStart),
+            end: setTimeToNoon(dateEnd),
           },
           displayDate: dateEnd,
           invalid: false,
         }));
         updateFocusedDate(dateEnd);
+        props.onChangeDate?.({start: setTimeToNoon(dateStart), end: setTimeToNoon(dateEnd) })
         return;
       }
 

diff --git a/tests/DatePicker/DatePicker.test.tsx b/tests/DatePicker/DatePicker.test.tsx
@@ -214,6 +214,42 @@ describe('DatePicker', () => {
     expect(container.querySelector('button')).toHaveAttribute('disabled');
   });
 
+  it('onChangeDate fn fires when a valid date is typed in the Datepicker Input', async () => {
+    const mockFn = jest.fn();
+    const { container } = render(<DatePicker onChangeDate={mockFn} />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    input?.focus();
+    fireEvent.change(input, { target: { value: '24/05/2024' } });
+    expect(mockFn).toHaveBeenCalled();
+  });
+  it('onChangeDate fn does not fire when an invalid date is typed in the Datepicker Input', async () => {
+    const mockFn = jest.fn();
+    const { container } = render(<DatePicker onChangeDate={mockFn} />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    input?.focus();
+    fireEvent.change(input, { target: { value: '24/05/1000' } });
+    expect(mockFn).not.toHaveBeenCalled();
+  });
+  it('when mode=range, onChangeDate fn only fires when an start and end valid dates are typed in the Datepicker Input', async () => {
+    const mockFn = jest.fn();
+    const { container } = render(
+      <DatePicker onChangeDate={mockFn} mode="range" />
+    );
+    const input = container.querySelector('input') as HTMLInputElement;
+    input?.focus();
+    // valid start date only
+    fireEvent.change(input, { target: { value: '24/05/2024' } });
+    expect(mockFn).not.toHaveBeenCalled();
+    // invalid end date
+    fireEvent.change(input, { target: { value: '24/05/2024 - 30/02/2024' } });
+    expect(mockFn).not.toHaveBeenCalled();
+    // clear input
+    fireEvent.change(input, { target: { value: '' } });
+    expect(mockFn).not.toHaveBeenCalled();
+    //valid start and end date
+    fireEvent.change(input, { target: { value: '24/05/2024 - 30/03/2024' } });
+    expect(mockFn).toHaveBeenCalled();
+  });
   it('onChangeDate fn fires when dates clicked', async () => {
     const mockFn = jest.fn();
     const { getByText, container } = render(
@@ -226,6 +262,20 @@ describe('DatePicker', () => {
     fireEvent.click(getByText('1'));
     await waitFor(() => expect(mockFn).toHaveBeenCalled());
   });
+  it('in mode=range, onChangeDate fn fires only after both dates clicked', async () => {
+    const mockFn = jest.fn();
+    const { getByText, container } = render(
+      <DatePicker onChangeDate={mockFn} mode="range" />
+    );
+    fireEvent.click(container.querySelector('button.dropdown-toggle')!);
+    await waitFor(() =>
+      expect(container.querySelector('.dropdown-menu.show')).toBeInTheDocument()
+    );
+    fireEvent.click(getByText('1'));
+    expect(mockFn).not.toHaveBeenCalled();
+    fireEvent.click(getByText('3'));
+    expect(mockFn).toHaveBeenCalled();
+  });
 
   it('onChange and onClear fn fires when click on Clear button', async () => {
     const onChangeDate = jest.fn();