chore(web): fix color field select (#737)

Co-authored-by: nina992 <[email protected]>
reearth · Oct 12, 2023 · ead2f52 · ead2f52
1 parent 53aa05b
commit ead2f52
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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}>