fix(datepicker): onChangeDate not called when input is made empty by …

…keyboard backspace
GovTechSG · Oct 3, 2024 · 3abea51 · 3abea51
1 parent 3f2e6d5
commit 3abea51
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
@@ -529,6 +529,9 @@ export const DatePicker: BsPrefixRefForwardingComponent<
 
     const enterDateSingle = (event: React.ChangeEvent<HTMLInputElement>) => {
       const enteredDate = event.target.value;
+      if (enteredDate === dateFormat.toLowerCase()) {
+        return clear();
+      }
       const parsedDate = dayjs(enteredDate, dateFormat).toDate();
       const afterMinDate = props.minDate
         ? setTimeToNoon(parsedDate) >= setTimeToNoon(new Date(props.minDate))
@@ -559,11 +562,15 @@ export const DatePicker: BsPrefixRefForwardingComponent<
         inputDate: enteredDate,
       }));
       updateFocusedDate(displayDate);
-
     };
 
     const enterDateRange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const enteredDate = event.target.value;
+
+      if (enteredDate === `${dateFormat.toLowerCase()} - ${dateFormat.toLowerCase()}`) {
+        return clear();
+      }
+
       const [start, end] = enteredDate.split(' - ');
       const dateStart = dayjs(start, dateFormat).toDate();
       const dateEnd = dayjs(end, dateFormat).toDate();
@@ -579,7 +586,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
       const dateEndBeforeMaxDate = props.maxDate
         ? setTimeToNoon(dateEnd) <= setTimeToNoon(new Date(props.maxDate))
         : true;
-
+      
       if (
         isValidDate(start, dateFormat) &&
         isValidDate(end, dateFormat) &&
@@ -610,7 +617,10 @@ export const DatePicker: BsPrefixRefForwardingComponent<
           invalid: false,
         }));
         updateFocusedDate(dateEnd);
-        props.onChangeDate?.({start: setTimeToNoon(dateStart), end: setTimeToNoon(dateEnd) })
+        props.onChangeDate?.({
+          start: setTimeToNoon(dateStart),
+          end: setTimeToNoon(dateEnd),
+        });
         return;
       }
 

diff --git a/tests/DatePicker/DatePicker.test.tsx b/tests/DatePicker/DatePicker.test.tsx
@@ -230,7 +230,33 @@ describe('DatePicker', () => {
     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 () => {
+  it('onChangeDate fn fires when input is made empty', async () => {
+    const onChangeDate = jest.fn();
+    const onClear = jest.fn()
+    const { container } = render(<DatePicker onChangeDate={onChangeDate} onClear={onClear} initialValue={new Date(2024, 9, 3)} />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    input?.focus();
+    fireEvent.change(input, { target: { value: '' } });
+    await waitFor(() => {
+      expect(onChangeDate).toHaveBeenCalledTimes(1);
+      expect(onClear).toHaveBeenCalledTimes(1);
+      expect(container.querySelector('input')?.value).toEqual('dd/mm/yyyy');
+    });
+  });
+  it('when mode=range onChangeDate fn fires when input is made empty', async () => {
+    const onChangeDate = jest.fn();
+    const onClear = jest.fn()
+    const { container } = render(<DatePicker mode="range" onChangeDate={onChangeDate} onClear={onClear} initialValue={{start: new Date(2024, 9, 3), end: new Date(2024, 9, 4)}} />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    input?.focus();
+    fireEvent.change(input, { target: { value: '' } });
+    await waitFor(() => {
+      expect(onChangeDate).toHaveBeenCalledTimes(1);
+      expect(onClear).toHaveBeenCalledTimes(1);
+      expect(container.querySelector('input')?.value).toEqual('dd/mm/yyyy - dd/mm/yyyy');
+    });
+  });
+  it('when mode=range, onChangeDate fn 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" />
@@ -245,7 +271,7 @@ describe('DatePicker', () => {
     expect(mockFn).not.toHaveBeenCalled();
     // clear input
     fireEvent.change(input, { target: { value: '' } });
-    expect(mockFn).not.toHaveBeenCalled();
+    expect(mockFn).toHaveBeenCalled();
     //valid start and end date
     fireEvent.change(input, { target: { value: '24/05/2024 - 30/03/2024' } });
     expect(mockFn).toHaveBeenCalled();