refactor(calendar input): use setter function instead of useEffect

dhis2 · Jan 16, 2024 · 49a5490 · 49a5490
1 parent fdd1bd9
commit 49a5490
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
@@ -36,24 +36,27 @@ export const CalendarInput = ({
 } = {}) => {
     const ref = useRef()
     const [open, setOpen] = useState(false)
-    const [tempInputValue, setTempInputValue] = useState(date)
+    const [tempInputValue, _setTempInputValue] = useState(date)
 
-    useEffect(() => {
-        const isValidInputDate = validateInput(tempInputValue)
-        if (isValidInputDate && date !== tempInputValue) {
-            const [year, month, day] = tempInputValue.split('-')
+    const setTempInputValue = (nextTempValue) => {
+        _setTempInputValue(nextTempValue)
+        const isValidInputDate = validateInput(nextTempValue)
+
+        if (isValidInputDate) {
+            const [year, month, day] = nextTempValue.split('-')
             const nextDate = Temporal.PlainDate.from({
                 calendar,
                 year,
                 month,
                 day,
             })
+
             onDateSelect({
                 calendarDate: nextDate,
-                calendarDateString: tempInputValue,
+                calendarDateString: nextTempValue,
             })
         }
-    }, [calendar, date, tempInputValue, onDateSelect])
+    }
 
     const calendarProps = React.useMemo(() => {
         const onDateSelectWrapper = (selectedDate) => {