chore(datepicker): fix infinite re-render (#295)

Author: tonghauhive

cypress/apps/react19/package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@govtechsg/sgds": "^2.3.6",
     "@govtechsg/sgds-react": "file:../../../dist",
+    "bootstrap-icons": "^1.12.1",
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.7",
     "react-dom": "^19.0.0"

cypress/apps/react19/package.json

@@ -1,15 +1,20 @@
-import './App.css'
-import  Modal  from "./components/ModalCom"
-import  Accordion  from "./components/AccordionCom"
-import "@govtechsg/sgds/css/sgds.css"
+import './App.css';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import Modal from './components/ModalCom';
+import Accordion from './components/AccordionCom';
+import DatepickerCom from './components/DatepickerCom';
+import '@govtechsg/sgds/css/sgds.css';
+import ButtonCom from './components/ButtonCom';
 
 function App() {
   return (
     <>
-   <Modal></Modal>
-   <Accordion/>
+      <Modal></Modal>
+      <Accordion />
+      <DatepickerCom />
+      <ButtonCom />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

cypress/apps/react19/src/App.jsx

@@ -0,0 +1,11 @@
+import { Button } from '@govtechsg/sgds-react';
+
+const ButtonCom = () => {
+  return (
+    <>
+      <Button>Click Me</Button>
+    </>
+  );
+};
+
+export default ButtonCom;

cypress/apps/react19/src/components/ButtonCom.jsx

@@ -0,0 +1,12 @@
+import { DatePicker } from '@govtechsg/sgds-react';
+
+const DatepickerCom = () => {
+  return (
+    <>
+      <DatePicker />
+      <DatePicker mode="range" />
+    </>
+  );
+};
+
+export default DatepickerCom;

cypress/apps/react19/src/components/DatepickerCom.jsx

@@ -567,7 +567,10 @@ export const DatePicker: BsPrefixRefForwardingComponent<
     const enterDateRange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const enteredDate = event.target.value;
 
-      if (enteredDate === `${dateFormat.toLowerCase()} - ${dateFormat.toLowerCase()}`) {
+      if (
+        enteredDate ===
+        `${dateFormat.toLowerCase()} - ${dateFormat.toLowerCase()}`
+      ) {
         return clear();
       }
 
@@ -586,7 +589,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
       const dateEndBeforeMaxDate = props.maxDate
         ? setTimeToNoon(dateEnd) <= setTimeToNoon(new Date(props.maxDate))
         : true;
-      
+
       if (
         isValidDate(start, dateFormat) &&
         isValidDate(end, dateFormat) &&
@@ -810,7 +813,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
             );
         }
       }
-    }, [props.initialValue, isRange, displayDate, dateFormat]);
+    }, [props.initialValue, isRange, dateFormat]);
 
     React.useEffect(() => {
       setDatepickerMenuId(generateId('datepicker', 'ul'));
@@ -840,7 +843,7 @@ export const DatePicker: BsPrefixRefForwardingComponent<
         const resetFocusedDate = getFocusedDate();
         updateFocusedDate(resetFocusedDate);
       }
-    }, [showCalendar, displayDate]);
+    }, [showCalendar]);
 
     const ariaLabelsForMenu = {
       day: 'Choose date',

src/DatePicker/DatePicker.tsx

@@ -232,8 +232,14 @@ describe('DatePicker', () => {
   });
   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 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: '' } });
@@ -245,15 +251,27 @@ describe('DatePicker', () => {
   });
   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 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');
+      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 () => {
@@ -2082,34 +2100,18 @@ describe('Datepicker Range mode', () => {
   });
 
   it('when initialValue passed in, either start or end should have same value as displayDate, else a console.error should appear', async () => {
-    const initialValue = { start: new Date('2020-01-01'), end: new Date() };
-    const consoleSpy = jest
-      .spyOn(console, 'error')
-      .mockImplementation(() => {});
-
-    const { rerender } = render(
-      <DatePicker mode="range" initialValue={initialValue} />
-    );
-    expect(consoleSpy).not.toHaveBeenCalled();
-
-    const newInitialValue = {
+    const initialValue = {
       start: new Date('2022-12-12'),
       end: new Date('2022-12-14'),
     };
-    rerender(
-      <DatePicker
-        mode="range"
-        initialValue={newInitialValue}
-        displayDate={new Date('2022-12-12')}
-      />
-    );
-
-    expect(consoleSpy).not.toHaveBeenCalled();
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
 
-    rerender(
+    render(
       <DatePicker
         mode="range"
-        initialValue={newInitialValue}
+        initialValue={initialValue}
         displayDate={new Date('2022-12-20')}
       />
     );

tests/DatePicker/DatePicker.test.tsx

@@ -65,16 +65,22 @@ describe('MonthView a11y', () => {
     const { getByText } = render(
       <MonthView
         onClickMonth={mockFn}
-        selectedDate={new Date(2024, 3, 11)}
+        selectedDate={selectedDate}
         displayDate={displayDate}
         show={true}
         onChangeMonth={mockOnChangeMonth}
         handleTabPressOnCalendarBody={mockhandleTabPressOnCalendarBody}
         monthRefs={monthRefs}
       />
     );
-    expect(getByText('Jan').getAttribute('aria-label')).toEqual(
-      `Current month, January ${selectedDate.getFullYear()}`
+    expect(
+      getByText(
+        selectedDate.toLocaleString('default', { month: 'long' })
+      ).getAttribute('aria-label')
+    ).toEqual(
+      `Current month, ${selectedDate.toLocaleString('default', {
+        month: 'long',
+      })} ${selectedDate.getFullYear()}`
     );
   });
   it('selected month should have aria-selected=true, mode=single', () => {
@@ -119,7 +125,7 @@ describe('MonthView a11y', () => {
       );
     }
   });
-  it("current month should be indicated in aria-label" , () => {
+  it('current month should be indicated in aria-label', () => {
     const { getByText } = render(
       <MonthView
         onClickMonth={mockFn}
@@ -131,10 +137,10 @@ describe('MonthView a11y', () => {
         monthRefs={monthRefs}
       />
     );
-    const currentMonth = new Date().getMonth()
-    const currentMonthName = MONTH_LABELS[currentMonth].slice(0,3)
+    const currentMonth = new Date().getMonth();
+    const currentMonthName = MONTH_LABELS[currentMonth].slice(0, 3);
     expect(getByText(currentMonthName).getAttribute('aria-label')).toContain(
-      "Current month"
+      'Current month'
     );
-  })
+  });
 });