From 800efdd734233ca07305c079e737d24c5f8f0ac6 Mon Sep 17 00:00:00 2001
From: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com>
Date: Tue, 29 Oct 2024 05:54:16 +0530
Subject: [PATCH] fix: ailabel autoalign was not working (#17659)

* fix: ailabel autoalign was not working

* fix: added fallbackPlacements instead of shift

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 .../react/src/components/Popover/index.tsx    | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
index 0f96b0070a2f..44f5061555d3 100644
--- a/packages/react/src/components/Popover/index.tsx
+++ b/packages/react/src/components/Popover/index.tsx
@@ -258,7 +258,41 @@ export const Popover: PopoverComponent = React.forwardRef(
             // Middleware order matters, arrow should be last
             middleware: [
               offset(!isTabTip ? popoverDimensions?.current?.offset : 0),
-              autoAlign && flip({ fallbackAxisSideDirection: 'start' }),
+              autoAlign &&
+                flip({
+                  fallbackPlacements: align.includes('bottom')
+                    ? [
+                        'bottom',
+                        'bottom-start',
+                        'bottom-end',
+                        'right',
+                        'right-start',
+                        'right-end',
+                        'left',
+                        'left-start',
+                        'left-end',
+                        'top',
+                        'top-start',
+                        'top-end',
+                      ]
+                    : [
+                        'top',
+                        'top-start',
+                        'top-end',
+                        'left',
+                        'left-start',
+                        'left-end',
+                        'right',
+                        'right-start',
+                        'right-end',
+                        'bottom',
+                        'bottom-start',
+                        'bottom-end',
+                      ],
+
+                  fallbackStrategy: 'initialPlacement',
+                  fallbackAxisSideDirection: 'start',
+                }),
               arrow({
                 element: caretRef,
               }),
@@ -567,7 +601,6 @@ function PopoverContentRenderFunction(
   const ref = useMergedRefs([setFloating, forwardRef]);
   const enableFloatingStyles =
     useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-
   return (
     <span {...rest} className={`${prefix}--popover`}>
       <span className={cx(`${prefix}--popover-content`, className)} ref={ref}>