Repository: Sage/carbon (ts)

Issue:
MultiActionButton is not displaying well when inside an Accordion
### Description

The list of entries in MultiActionButton control is not showing the whole list when it is inside a Accordion.

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-b7l4awhr?file=src%2FApp.tsx

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

SBS-118501

### Suggested solution

_No response_

### Carbon version

144.22.1

### Design tokens version

_No response_

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix: ensure multi-action and split button children container is not hidden by parent overflow
fix #7134

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

Ensures that the child container has fixed position so that it isn't hidden when rendered inside a parent with overflow hidden

<img width="1497" alt="image" src="https://github.com/user-attachments/assets/9a35302b-107e-4d88-949f-804369bb242b" />

<img width="1488" alt="image" src="https://github.com/user-attachments/assets/6471aff6-793f-4893-9a3e-16ac6c3fb5c9" />


### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
Overflow on parent means children buttons in MultiAction and Split Buttons are hidden

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [x] Playwright automation tests added or updated if required
- [x Storybook added or updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->
Test story added to Accordion

Patch:
diff --git a/src/components/accordion/accordion.pw.tsx b/src/components/accordion/accordion.pw.tsx
index a2162a225..bedc19188 100644
--- a/src/components/accordion/accordion.pw.tsx
+++ b/src/components/accordion/accordion.pw.tsx
@@ -36,8 +36,11 @@ import {
   AccordionGroupDefault,
   AccordionGroupValidation,
   AccordionWithDefinitionList,
+  AccordionWithSplit,
 } from "./components.test-pw";
 
+import { additionalButton as splitAdditionalButtons } from "../../../playwright/components/split-button";
+
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
 // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
@@ -434,6 +437,21 @@ test.describe("should render Accordion component", () => {
     await expect(accordionTitleContainer(page)).toContainText("subtle");
     await expect(accordionTitleContainer(page)).not.toContainText("subtitle");
   });
+
+  test("should not hide the children container of SplitButton when it opens", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AccordionWithSplit />);
+
+    await getDataElementByValue(page, "dropdown").click();
+
+    await expect(splitAdditionalButtons(page, 0)).toBeVisible();
+    await expect(splitAdditionalButtons(page, 1)).toBeVisible();
+    await expect(splitAdditionalButtons(page, 2)).toBeVisible();
+    await expect(splitAdditionalButtons(page, 3)).toBeVisible();
+    await expect(splitAdditionalButtons(page, 4)).toBeVisible();
+  });
 });
 
 test.describe("should render Accordion Grouped component", () => {
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 ea9321a4d..a708ab39d 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/multi-action-button/multi-action-button.pw.tsx b/src/components/multi-action-button/multi-action-button.pw.tsx
index cf705d250..44638574a 100644
--- a/src/components/multi-action-button/multi-action-button.pw.tsx
+++ b/src/components/multi-action-button/multi-action-button.pw.tsx
@@ -106,8 +106,8 @@ test.describe("Prop tests", () => {
 
   (
     [
-      ["left", 0],
-      ["right", -46],
+      ["left", 198],
+      ["right", 152],
     ] as [MultiActionButtonProps["position"], number][]
   ).forEach(([position, value]) => {
     test(`should render with menu position to the ${position}`, async ({
@@ -119,7 +119,7 @@ test.describe("Prop tests", () => {
       const actionButton = getComponent(page, "multi-action-button");
       await actionButton.click();
       const listContainer = getDataElementByValue(page, "additional-buttons");
-      await expect(listContainer).toHaveCSS("position", "absolute");
+      await expect(listContainer).toHaveCSS("position", "fixed");
       await assertCssValueIsApproximately(listContainer, "top", 46);
       await assertCssValueIsApproximately(listContainer, "left", value);
     });
diff --git a/src/components/split-button/split-button.component.tsx b/src/components/split-button/split-button.component.tsx
index ba7828c67..ef796c224 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),
diff --git a/src/components/split-button/split-button.pw.tsx b/src/components/split-button/split-button.pw.tsx
index c237d1b3b..d694506ba 100644
--- a/src/components/split-button/split-button.pw.tsx
+++ b/src/components/split-button/split-button.pw.tsx
@@ -240,8 +240,8 @@ test.describe("Prop tests", () => {
 
   (
     [
-      ["left", 0],
-      ["right", 42],
+      ["left", 198],
+      ["right", 242],
     ] as [SplitButtonProps["position"], number][]
   ).forEach(([position, value]) => {
     test(`should render with menu position to the ${position}`, async ({
@@ -252,7 +252,7 @@ test.describe("Prop tests", () => {
 
       await getDataElementByValue(page, "dropdown").click();
       const listContainer = additionalButtonsContainer(page);
-      await expect(listContainer).toHaveCSS("position", "absolute");
+      await expect(listContainer).toHaveCSS("position", "fixed");
       await assertCssValueIsApproximately(listContainer, "top", 46);
       await assertCssValueIsApproximately(listContainer, "left", value);
     });


Test patch:
diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx
index a2f4a69e2..b85d2759d 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/accordion/components.test-pw.tsx b/src/components/accordion/components.test-pw.tsx
index e05b897e7..058ba569b 100644
--- a/src/components/accordion/components.test-pw.tsx
+++ b/src/components/accordion/components.test-pw.tsx
@@ -6,6 +6,7 @@ import Button from "../button/button.component";
 import { Checkbox } from "../checkbox";
 import { Dl, Dt, Dd } from "../definition-list";
 import Link from "../link/link.component";
+import SplitButton from "../split-button";
 
 const errorVal = "error";
 const warningVal = "warning";
@@ -550,3 +551,17 @@ export const AccordionWithDefinitionList = () => {
     </Accordion>
   );
 };
+
+export const AccordionWithSplit = () => {
+  return (
+    <Accordion expanded title="Accordion">
+      <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>
+  );
+};