From 0bb8fd093696a5453d546f03ecd40e903dcdaa6d Mon Sep 17 00:00:00 2001
From: edleeks87 <edward.leeks@sage.com>
Date: Tue, 17 Dec 2024 16:01:18 +0000
Subject: [PATCH] fix: ensure multi-action and split button children container
 is not hidden by parent overflow

Ensures that the child container has fixed position so that it isn't hidden when rendered inside a
parent with overflow hidden

fix #7134
---
 .../accordion/accordion-test.stories.tsx      | 29 ++++++++++++++++++-
 .../multi-action-button.component.tsx         |  1 +
 .../split-button/split-button.component.tsx   |  1 +
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx
index a2f4a69e20..b85d2759d9 100644
--- a/src/components/accordion/accordion-test.stories.tsx
+++ b/src/components/accordion/accordion-test.stories.tsx
@@ -3,10 +3,13 @@ import { action } from "@storybook/addon-actions";
 import { Accordion, AccordionGroup } from ".";
 import Textbox from "../textbox";
 import Box from "../box";
+import MultiActionButton from "../multi-action-button";
+import SplitButton from "../split-button";
+import Button from "../button/button.component";
 
 export default {
   title: "Accordion/Test",
-  includeStories: ["Default", "Grouped"],
+  includeStories: ["Default", "Grouped", "AccordionWithMultiAction"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -112,3 +115,27 @@ export const Grouped = ({ ...args }) => (
 );
 
 Grouped.storyName = "grouped";
+
+export const AccordionWithMultiAction = () => {
+  return (
+    <Accordion title="Accordion">
+      <MultiActionButton text="Multi Action Button">
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+        <Button>Button 4</Button>
+        <Button>Button 5</Button>
+      </MultiActionButton>
+      <SplitButton text="Split Button">
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+        <Button>Button 4</Button>
+        <Button>Button 5</Button>
+      </SplitButton>
+    </Accordion>
+  );
+};
+
+AccordionWithMultiAction.storyName =
+  "Accordion with MultiAction and Split Button";
diff --git a/src/components/multi-action-button/multi-action-button.component.tsx b/src/components/multi-action-button/multi-action-button.component.tsx
index ea9321a4df..a708ab39dc 100644
--- a/src/components/multi-action-button/multi-action-button.component.tsx
+++ b/src/components/multi-action-button/multi-action-button.component.tsx
@@ -86,6 +86,7 @@ export const MultiActionButton = ({
           : /* istanbul ignore next */ "bottom-end"
       }
       reference={buttonNode}
+      popoverStrategy="fixed"
       middleware={[
         offset(6),
         flip({
diff --git a/src/components/split-button/split-button.component.tsx b/src/components/split-button/split-button.component.tsx
index ba7828c67d..ef796c2247 100644
--- a/src/components/split-button/split-button.component.tsx
+++ b/src/components/split-button/split-button.component.tsx
@@ -182,6 +182,7 @@ export const SplitButton = ({
             ? /* istanbul ignore next */ "bottom-start"
             : "bottom-end"
         }
+        popoverStrategy="fixed"
         reference={buttonNode}
         middleware={[
           offset(6),