From 7dfaa9563888a9c0e2deb40908f9026f8a71d4b6 Mon Sep 17 00:00:00 2001
From: viraj-10 <virajjoshi132@gmail.com>
Date: Thu, 7 Nov 2024 11:34:21 +0530
Subject: [PATCH] fix: popover arrow style issue

---
 packages/unstyled/popover/src/Popover.tsx     |  2 --
 .../unstyled/popover/src/PopoverArrow.tsx     | 27 ++++++++++++-------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/unstyled/popover/src/Popover.tsx b/packages/unstyled/popover/src/Popover.tsx
index 0f37fac28f..cf4af6a3c8 100644
--- a/packages/unstyled/popover/src/Popover.tsx
+++ b/packages/unstyled/popover/src/Popover.tsx
@@ -1,8 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useControllableState } from '@gluestack-ui/hooks';
 import { Overlay } from '@gluestack-ui/overlay';
-
-// import { useOverlayPosition } from '@react-native-aria/overlays';
 import { PopoverProvider } from './PopoverContext';
 
 export const Popover = (StyledPopover: any) =>
diff --git a/packages/unstyled/popover/src/PopoverArrow.tsx b/packages/unstyled/popover/src/PopoverArrow.tsx
index e5be1d5bbb..1c9471f963 100644
--- a/packages/unstyled/popover/src/PopoverArrow.tsx
+++ b/packages/unstyled/popover/src/PopoverArrow.tsx
@@ -27,11 +27,17 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
       });
     }, [arrowHeight, arrowWidth, placement, actualPlacement]);
 
-    if (arrowProps?.style?.left) {
-      arrowProps.style.left -= arrowWidth / 2;
-    } else if (arrowProps?.style?.top) {
-      arrowProps.style.top -= arrowHeight / 2;
-    }
+    const ArrowStyle = React.useMemo(() => {
+      return {
+        top: arrowProps?.style?.top - arrowHeight / 2,
+        left: arrowProps?.style?.left - arrowWidth / 2,
+      };
+    }, [
+      arrowHeight,
+      arrowWidth,
+      arrowProps?.style?.top,
+      arrowProps?.style?.left,
+    ]);
 
     React.useEffect(() => {
       const ArrowComponent = (
@@ -42,6 +48,7 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
             updateArrowSize({ height, width });
           }}
           {...props}
+          {...ArrowStyle}
           key={actualPlacement + 'arrow'}
           initial={{
             opacity: 0,
@@ -71,15 +78,15 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
           }}
           style={[
             props?.style,
-            arrowProps?.style,
+            ArrowStyle,
             {
               // To avoid border radius case
               top:
                 placement === 'right bottom' || placement === 'left bottom'
-                  ? arrowProps?.style?.top > 4
-                    ? arrowProps?.style?.top - 4
-                    : arrowProps?.style?.top
-                  : arrowProps?.style?.top,
+                  ? ArrowStyle?.top > 4
+                    ? ArrowStyle?.top - 4
+                    : ArrowStyle?.top
+                  : ArrowStyle?.top,
             },
             additionalStyles,
           ]}