From ead2f52af914003426a78c175d1102663bc4b29d Mon Sep 17 00:00:00 2001
From: nina992 <89770889+nina992@users.noreply.github.com>
Date: Thu, 12 Oct 2023 12:43:33 +0400
Subject: [PATCH] chore(web): fix color field select (#737)

Co-authored-by: nina992 <nouralali992@gmail.com>
---
 web/src/beta/components/fields/ColorField/hooks.ts  | 7 +++++--
 web/src/beta/components/fields/ColorField/index.tsx | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/beta/components/fields/ColorField/hooks.ts b/web/src/beta/components/fields/ColorField/hooks.ts
index 31ea98e0ef..228e49b33d 100644
--- a/web/src/beta/components/fields/ColorField/hooks.ts
+++ b/web/src/beta/components/fields/ColorField/hooks.ts
@@ -9,6 +9,7 @@ export default ({ value, onChange }: Params) => {
   const [rgba, setRgba] = useState<RGBA>(tinycolor(value).toRgb());
   const [tempColor, setTempColor] = useState(colorState);
   const [open, setOpen] = useState(false);
+
   const wrapperRef = useRef<HTMLDivElement>(null);
   const pickerRef = useRef<HTMLDivElement>(null);
 
@@ -78,7 +79,9 @@ export default ({ value, onChange }: Params) => {
 
   //events
 
-  const handleClick = useCallback(() => setOpen(!open), [open]);
+  const handleClick = useCallback(() => {
+    setOpen(!open);
+  }, [open]);
 
   const handleKeyPress = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -125,7 +128,7 @@ export default ({ value, onChange }: Params) => {
       document.removeEventListener("mousedown", handleClickOutside);
       document.removeEventListener("touchstart", handleClickOutside);
     };
-  }, [handleClose]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     wrapperRef,
diff --git a/web/src/beta/components/fields/ColorField/index.tsx b/web/src/beta/components/fields/ColorField/index.tsx
index b65c9f844f..db9cd48422 100644
--- a/web/src/beta/components/fields/ColorField/index.tsx
+++ b/web/src/beta/components/fields/ColorField/index.tsx
@@ -39,7 +39,7 @@ const ColorField: React.FC<Props> = ({ name, description, value, onChange }) =>
   return (
     <Property name={name} description={description}>
       <Wrapper ref={wrapperRef}>
-        <Popover.Provider open={open} placement="bottom-start" onOpenChange={handleClick}>
+        <Popover.Provider open={open} placement="bottom-start">
           <Popover.Trigger asChild>
             <InputWrapper ref={pickerRef}>
               <Layers onClick={handleClick}>