From 5683d02b9377e57db59718b7a2df272fcc2f8c08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Fri, 21 Mar 2025 11:19:22 +0100
Subject: [PATCH] FIX: Clean up (anchorOrigin/transformOrigin) logic

---
 .../components/ColorPicker/ColorPicker.tsx    | 27 +++++++------------
 .../src/components/SheetTabBar/SheetTab.tsx   |  2 ++
 .../src/components/Toolbar/Toolbar.tsx        |  4 +++
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx b/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
index 9a9f4c9..757d056 100644
--- a/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
+++ b/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
@@ -14,8 +14,8 @@ type ColorPickerProps = {
   onChange: (color: string) => void;
   onClose: () => void;
   anchorEl: React.RefObject<HTMLElement | null>;
-  anchorOrigin?: PopoverOrigin;
-  transformOrigin?: PopoverOrigin;
+  anchorOrigin: PopoverOrigin;
+  transformOrigin: PopoverOrigin;
   open: boolean;
 };
 
@@ -35,7 +35,6 @@ const ColorPicker = ({
 }: ColorPickerProps) => {
   const [selectedColor, setSelectedColor] = useState<string>(color);
   const [isPickerOpen, setPickerOpen] = useState(false);
-  const [isMenuOpen, setMenuOpen] = useState(open && !isPickerOpen);
   const recentColors = useRef<string[]>([]);
   const { t } = useTranslation();
 
@@ -43,10 +42,6 @@ const ColorPicker = ({
     setSelectedColor(color);
   }, [color]);
 
-  useEffect(() => {
-    setMenuOpen(open && !isPickerOpen);
-  }, [open, isPickerOpen]);
-
   const handleColorSelect = (color: string) => {
     if (!recentColors.current.includes(color)) {
       const maxRecentColors = 14;
@@ -62,7 +57,7 @@ const ColorPicker = ({
 
   const handleClose = () => {
     setPickerOpen(false);
-    if (onClose) onClose();
+    onClose();
   };
 
   // Colors definitions
@@ -120,17 +115,13 @@ const ColorPicker = ({
   // Render color picker or menu
   return (
     <>
-      {isPickerOpen ? (
+      {isPickerOpen && open ? (
         <StylePopover
           open={isPickerOpen}
           onClose={handleClose}
           anchorEl={anchorEl.current}
-          anchorOrigin={
-            anchorOrigin || { vertical: "bottom", horizontal: "left" }
-          }
-          transformOrigin={
-            transformOrigin || { vertical: "top", horizontal: "left" }
-          }
+          anchorOrigin={anchorOrigin}
+          transformOrigin={transformOrigin}
         >
           <ColorPickerDialog>
             <HexColorPicker
@@ -158,7 +149,7 @@ const ColorPicker = ({
             </ColorPickerInput>
             <HorizontalDivider />
             <Buttons>
-              <CancelButton onClick={handleClose}>
+              <CancelButton onClick={() => setPickerOpen(false)}>
                 {t("color_picker.cancel")}
               </CancelButton>
               <StyledButton
@@ -176,8 +167,10 @@ const ColorPicker = ({
       ) : (
         <StyledMenu
           anchorEl={anchorEl.current}
-          open={isMenuOpen}
+          open={open && !isPickerOpen}
           onClose={handleClose}
+          anchorOrigin={anchorOrigin}
+          transformOrigin={transformOrigin}
         >
           <MenuItemWrapper onClick={() => handleColorSelect(defaultColor)}>
             <MenuItemSquare style={{ backgroundColor: defaultColor }} />
diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
index 41d32ae..25c903d 100644
--- a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
@@ -149,6 +149,8 @@ function SheetTab(props: SheetTabProps) {
         }}
         anchorEl={colorButton}
         open={colorPickerOpen}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        transformOrigin={{ vertical: "bottom", horizontal: "left" }}
       />
       <SheetDeleteDialog
         open={deleteDialogOpen}
diff --git a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
index 105e147..f32e03d 100644
--- a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
+++ b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
@@ -454,6 +454,8 @@ function Toolbar(properties: ToolbarProperties) {
         }}
         anchorEl={fontColorButton}
         open={fontColorPickerOpen}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
       />
       <ColorPicker
         color={properties.fillColor}
@@ -470,6 +472,8 @@ function Toolbar(properties: ToolbarProperties) {
         }}
         anchorEl={fillColorButton}
         open={fillColorPickerOpen}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
       />
       <BorderPicker
         onChange={(border): void => {