fix(ffe-datepicker-react): Fix bug with reacecondition with calendar input

Author: dagfrode

packages/ffe-datepicker-react/src/datelogic/simpledate.ts

@@ -107,6 +107,10 @@ export class SimpleDate {
                 : normalizedMonthNumber;
         return `${day}.${month}.${this.year}`;
     }
+
+    public toString() {
+        return this.format();
+    }
 }
 
 export const getSimpleDateToday = (): SimpleDate => new SimpleDate();

packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx

@@ -77,11 +77,16 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
     const monthRef = useRef<HTMLSpanElement>(null);
     const yearRef = useRef<HTMLSpanElement>(null);
 
+    const formatDate = useCallback(() => {
+        return `${padZero(day ?? 0)}.${padZero(month ?? 0)}.${year}`;
+    }, [day, month, year]);
+
     const getFieldMessageId = () => {
         return fieldMessage ? `${datepickerId}-fieldmessage` : undefined;
     };
 
     const fieldMessageId = getFieldMessageId();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const debounceCalendar = useCallback(
         debounce((newValue: any) => {
             if (newValue !== lastValidDate && validateDate(newValue)) {
@@ -100,8 +105,8 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
         };
     }, [debounceCalendar]);
 
-    const validateDateIntervals = () => {
-        const dateString = `${day}.${month}.${year}`;
+    const validateDateIntervals = useCallback(() => {
+        const dateString = formatDate();
         getSimpleDateFromString(dateString, date => {
             const maxDateValidated = maxDateProp
                 ? getSimpleDateFromString(maxDateProp)
@@ -124,16 +129,24 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
             }
             setLastValidDate(formattedDate);
         });
-    };
+    }, [formatDate, maxDateProp, onChange, setDay, setMonth, setYear]);
 
     useEffect(() => {
         if (minDateProp !== minDate || maxDateProp !== maxDate) {
             setMinDate(minDateProp);
             setMaxDate(maxDateProp);
             validateDateIntervals();
         }
-        debounceCalendar(`${day}.${month}.${year}`);
-    }, [minDateProp, maxDateProp, day, month, year, debounceCalendar]);
+        debounceCalendar(formatDate());
+    }, [
+        minDateProp,
+        maxDateProp,
+        formatDate,
+        debounceCalendar,
+        minDate,
+        maxDate,
+        validateDateIntervals,
+    ]);
 
     const closeCalendarSetInputFocus = () => {
         setDisplayDatePicker(false);
@@ -172,6 +185,7 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
         return () => {
             removeGlobalEventListeners();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [displayDatePicker]);
 
     const calendarButtonClickHandler = () => {
@@ -238,7 +252,7 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
             setDay([date.date]);
             setMonth([date.month + 1]);
             setYear([date.year]);
-            onChange(`${day}.${month}.${year}`);
+            onChange(formatDate());
         }
     };
 

packages/ffe-datepicker-react/src/datepicker/DatepickerContext.tsx

@@ -58,10 +58,14 @@ export const DatepickerProvider: React.FC<Props> = ({
     );
 
     useEffect(() => {
-        setDay(newDate ? newDate.date : null);
-        setMonth(newDate ? newDate.month + 1 : null);
-        setYear(newDate ? newDate.year : null);
-        setCalendarActiveDate(newDate?.toString() ?? '');
+        const newActiveDate = newDate?.toString() ?? '';
+        if (calendarActiveDate !== newActiveDate) {
+            setDay(newDate ? newDate.date : null);
+            setMonth(newDate ? newDate.month + 1 : null);
+            setYear(newDate ? newDate.year : null);
+            setCalendarActiveDate(newDate?.toString() ?? '');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [newDate]);
 
     return (

packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx

@@ -37,7 +37,7 @@ describe('<InputGroup><Datepicker /></InputGroup>', () => {
         expect(datepicker.getValue()).toStrictEqual('01.02.2024');
     });
 
-    it.skip('datepicker can be updated by testing functions', async () => {
+    it('datepicker can be updated by testing functions', async () => {
         renderDatePicker({ value: '01.01.2024' });
 
         const datepicker = getDatepickerByLabelText('Datovelger');

packages/ffe-datepicker-react/src/datepicker/testHelper.ts

@@ -17,12 +17,6 @@ async function simulateTyping(element: Element, text: string, delay = 100) {
                     element.dispatchEvent(
                         new KeyboardEvent('keydown', eventOptions),
                     );
-                    element.dispatchEvent(
-                        new Event('input', { bubbles: true }),
-                    );
-                    element.dispatchEvent(
-                        new KeyboardEvent('keyup', eventOptions),
-                    );
                 });
 
                 index++;