fix(datepicker): reset button also reset calendar view to day

GovTechSG · Apr 26, 2024 · d9abb45 · d9abb45
1 parent 987989e
commit d9abb45
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx
@@ -308,6 +308,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
           ? { start: undefined, end: undefined }
           : undefined,
       });
+      setView("day");
       const resetFocusedDate = new Date();
       updateFocusedDate(resetFocusedDate);
       props.onClear?.();
@@ -880,7 +881,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
             onClick={clear}
             disabled={props.disabled}
             variant={clearBtnVariant}
-            aria-label="Clear Selection"
+            aria-label="Reset Datepicker"
           >
             <i className="bi bi-x"></i>
             <span className="visually-hidden">clear</span>

diff --git a/tests/DatePicker/DatePicker.test.tsx b/tests/DatePicker/DatePicker.test.tsx
@@ -242,7 +242,7 @@ describe('DatePicker', () => {
     );
 
     fireEvent.click(
-      container.querySelector('button[aria-label="Clear Selection"]')!
+      container.querySelector('button[aria-label="Reset Datepicker"]')!
     );
 
     await waitFor(() => {
@@ -2218,3 +2218,49 @@ describe('Datepicker a11y', () => {
     expect(input.getAttribute('aria-describedby')).toEqual(feedbackId);
   });
 });
+
+describe('Datepicker reset button', () => {
+  it('resets calendar to day view and input when clear button is clicked', async () => {
+    const { container } = render(<DatePicker />);
+    const thisMonth = MONTH_LABELS[new Date().getMonth()];
+    const thisYear = new Date().getFullYear();
+    const calendarBtn = container.querySelector(
+      'button.dropdown-toggle'
+    ) as HTMLButtonElement;
+    const resetBtn = container.querySelector(
+      'button[aria-label="Reset Datepicker"]'
+    ) as HTMLButtonElement;
+    //Open calendar
+    fireEvent.click(calendarBtn);
+    await waitFor(() => {
+      expect(
+        container.querySelector('.dropdown-menu.datepicker.sgds.show')
+      ).toBeInTheDocument();
+    });
+    //navigate to month view
+    const headerBtn = container.querySelector(
+      'button[aria-live="polite"]'
+    ) as HTMLButtonElement;
+    expect(headerBtn.textContent).toEqual(`${thisMonth} ${thisYear}`);
+    fireEvent.click(headerBtn);
+    await waitFor(() =>
+      expect(headerBtn?.textContent).toEqual(thisYear.toString())
+    );
+    // clicking reset button
+    fireEvent.click(resetBtn);
+    await waitFor(() =>
+      expect(headerBtn?.textContent).toEqual(`${thisMonth} ${thisYear}`)
+    );
+  });
+  it('resets input to dd/mm/yyyy when button is clicked ', async () => {
+    const initialValue = new Date(2024, 3, 26);
+    const { container } = render(<DatePicker initialValue={initialValue} />);
+    const input = container.querySelector('input');
+    expect(input?.value).toEqual('26/04/2024');
+    const resetBtn = container.querySelector(
+      'button[aria-label="Reset Datepicker"]'
+    ) as HTMLButtonElement;
+    fireEvent.click(resetBtn);
+    expect(input?.value).toEqual('dd/mm/yyyy');
+  });
+});