From 80ba8b6805da7a904965ad17b32864d51f22ee4e Mon Sep 17 00:00:00 2001
From: devinxl <devin@nodereal.io>
Date: Tue, 10 Oct 2023 14:37:59 +0800
Subject: [PATCH] fix(dcellar-web-ui): custom time modal cannot close while
 click outside

---
 .../pricing-calculator/components/CustomTime.tsx      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/CustomTime.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/CustomTime.tsx
index 465089d5..1a695c09 100644
--- a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/CustomTime.tsx
+++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/CustomTime.tsx
@@ -6,8 +6,9 @@ import {
   PopoverFooter,
   PopoverHeader,
   PopoverTrigger,
+  useOutsideClick,
 } from '@totejs/uikit';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { NumInput } from './NumInput';
 import { SizeMenu } from './SizeMenu';
 import { DCButton } from '@/components/common/DCButton';
@@ -39,6 +40,7 @@ export const CustomTime = ({
   onChangeInput,
   gaClickName,
 }: Props) => {
+  const ref = useRef(null);
   const swapTimeUnits = swapObj(TimeUnits);
   const handleNavigation = useCallback(
     (e: any) => {
@@ -53,9 +55,13 @@ export const CustomTime = ({
       window.removeEventListener('scroll', handleNavigation);
     };
   }, [handleNavigation]);
+  useOutsideClick({
+    ref,
+    handler: () => isOpen && onClose(),
+  });
 
   return (
-    <Popover isOpen={isOpen} placement="bottom">
+    <Popover isOpen={isOpen} placement="bottom" >
       <PopoverTrigger>
         <DCButton
           variant="ghost"
@@ -79,6 +85,7 @@ export const CustomTime = ({
         </DCButton>
       </PopoverTrigger>
       <PopoverContent
+        ref={ref}
         w={226}
         p={16}
         borderRadius={4}