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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+AccordionWithMultiAction.storyName =
+ "Accordion with MultiAction and Split Button";
diff --git a/src/components/accordion/accordion.pw.tsx b/src/components/accordion/accordion.pw.tsx
index a2162a225d..bedc191887 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();
+
+ 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/accordion/components.test-pw.tsx b/src/components/accordion/components.test-pw.tsx
index e05b897e73..058ba569bc 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 = () => {
);
};
+
+export const AccordionWithSplit = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
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/multi-action-button/multi-action-button.pw.tsx b/src/components/multi-action-button/multi-action-button.pw.tsx
index cf705d250b..44638574a2 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 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),
diff --git a/src/components/split-button/split-button.pw.tsx b/src/components/split-button/split-button.pw.tsx
index c237d1b3b3..d694506ba8 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);
});