fix(monitor-ui): datepicker to handle string date (#269)

fixes #268
MTES-MCT · Jan 20, 2023 · efb3997 · efb3997
2 parents 414d88c + 979f936
commit efb3997
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/modifiers": "^4.0.0",
-    "@mtes-mct/monitor-ui": "2.8.0",
+    "@mtes-mct/monitor-ui": "2.8.1",
     "@reduxjs/toolkit": "1.8.2",
     "@sentry/react": "6.19.7",
     "@sentry/tracing": "6.19.7",

diff --git a/frontend/src/uiMonitor/CustomFormikFields/FormikDatePicker.tsx b/frontend/src/uiMonitor/CustomFormikFields/FormikDatePicker.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { DatePicker } from '@mtes-mct/monitor-ui'
 import { useField } from 'formik'
-import { MutableRefObject, useRef } from 'react'
+import { MutableRefObject, useEffect, useReducer, useRef } from 'react'
 // import { parseISO } from 'rsuite/esm/utils/dateUtils'
 import styled from 'styled-components'
 
@@ -21,9 +21,16 @@ export function FormikDatePicker({ isCompact, isLight, label, name, withTime }:
   const { setValue } = helpers
   const datepickerRef = useRef() as MutableRefObject<HTMLDivElement>
 
+  const [keyForceUpdate, forceUpdate] = useReducer(x => x + 1, 0)
+
+  useEffect(() => {
+    forceUpdate()
+  }, [name, forceUpdate])
+
   return (
     <DatePickerWrapper ref={datepickerRef} data-cy="datepicker">
       <DatePicker
+        key={keyForceUpdate}
         defaultValue={value}
         isCompact={isCompact}
         isLight={isLight}