fix(fields): handle detached click outside for time in DatePicker & D…

…ateRangePicker

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,7 +1,7 @@
 ## Related Issues
 
-- Resolve MTES-MCT/monitorenv#123
-- Resolve MTES-MCT/monitorfish#123
+- MTES-MCT/monitorenv#123
+- MTES-MCT/monitorfish#123
 
 ## Preview URL
 

src/fields/DatePicker/index.tsx

@@ -210,6 +210,7 @@ export function DatePicker({
           <Field $isTimeField>
             <TimeInput
               ref={timeInputRef}
+              baseContainer={baseContainer}
               defaultValue={selectedTimeTupleRef.current}
               disabled={disabled}
               isCompact={isCompact}

src/fields/DateRangePicker/TimeInput.tsx

@@ -1,6 +1,7 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
 import styled from 'styled-components'
 
+import { useClickOutside } from '../../hooks/useClickOutside'
 import { useForceUpdate } from '../../hooks/useForceUpdate'
 import { Clock } from '../../icons'
 import { NumberInput } from './NumberInput'
@@ -12,6 +13,7 @@ import type { ForwardedRef, MutableRefObject } from 'react'
 import type { Promisable } from 'type-fest'
 
 export type TimeInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
+  baseContainer?: Document | HTMLDivElement | null
   defaultValue?: TimeTuple
   // TODO Check why TS thinks there is no `disabled` prop in `NumberInputProps`.
   disabled: boolean
@@ -28,6 +30,7 @@ export type TimeInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'o
 }
 function TimeInputWithRef(
   {
+    baseContainer,
     defaultValue,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     disabled = false,
@@ -90,19 +93,6 @@ function TimeInputWithRef(
     setIsFocused(false)
   }, [])
 
-  const handleClickOutside = useCallback(
-    (event: globalThis.MouseEvent) => {
-      const target = event.target as Node | null
-
-      if (hourInputRef.current.contains(target) || minuteInputRef.current.contains(target)) {
-        return
-      }
-
-      closeRangedTimePicker()
-    },
-    [closeRangedTimePicker]
-  )
-
   const handleFocus = useCallback(() => {
     setIsFocused(true)
 
@@ -139,14 +129,6 @@ function TimeInputWithRef(
     forceUpdate()
   }, [forceUpdate])
 
-  useEffect(() => {
-    window.document.addEventListener('click', handleClickOutside)
-
-    return () => {
-      window.document.removeEventListener('click', handleClickOutside)
-    }
-  }, [handleClickOutside])
-
   const submit = useCallback(() => {
     setHasValidationError(false)
 
@@ -168,6 +150,8 @@ function TimeInputWithRef(
     onChange(nextTimeTuple)
   }, [closeRangedTimePicker, onChange])
 
+  useClickOutside(boxRef, closeRangedTimePicker, baseContainer)
+
   return (
     <Box
       ref={boxRef}

src/fields/DateRangePicker/index.tsx

@@ -297,6 +297,7 @@ export function DateRangePicker({
           <Field isTimeField>
             <TimeInput
               ref={startTimeInputRef}
+              baseContainer={baseContainer}
               defaultValue={selectedStartTimeTupleRef.current}
               disabled={disabled}
               isCompact={isCompact}
@@ -335,6 +336,7 @@ export function DateRangePicker({
           <Field isTimeField>
             <TimeInput
               ref={endTimeInputRef}
+              baseContainer={baseContainer}
               defaultValue={selectedEndTimeTupleRef.current}
               disabled={disabled}
               isCompact={isCompact}

src/hooks/useClickOutside.ts

@@ -10,7 +10,7 @@ export const useClickOutside = (
   baseContainer?: Document | HTMLDivElement | null
 ) => {
   const handleClickOutside = useCallback(
-    (event: Event) => {
+    (event: MouseEvent) => {
       const eventTarget = event.target as Node | null
       const zoneRefs = Array.isArray(zoneRefOrzoneRefs) ? zoneRefOrzoneRefs : [zoneRefOrzoneRefs]
 
@@ -31,10 +31,10 @@ export const useClickOutside = (
   useEffect(() => {
     const globalContainer = baseContainer ?? window.document
 
-    globalContainer.addEventListener('click', handleClickOutside)
+    globalContainer.addEventListener('click', handleClickOutside as any)
 
     return () => {
-      globalContainer.removeEventListener('click', handleClickOutside)
+      globalContainer.removeEventListener('click', handleClickOutside as any)
     }
   }, [baseContainer, handleClickOutside])
 }