Repository: Sage/carbon (ts)

Issue:
Allow to set the label and icon on opposite sides in fullWidth button
### Desired behaviour

I would like to be able to set an icon and label in a button with "fullWidth" enabled on opposite sides.

<img width="246" alt="image" src="https://user-images.githubusercontent.com/112560351/195278936-a13d29b2-df96-4be2-b87b-312a5d7f126d.png">


### Current behaviour

Currently it is not possible to set the icon and label on opposite sides in button.
If we set fullWidth to true, the button with the icon looks like this:

<img width="250" alt="image" src="https://user-images.githubusercontent.com/112560351/195280049-11905baf-11c2-490b-8785-e0a7e206bf51.png">


### Suggested Solution

Just add a new property that will set margin-left / margin-right (depending on the position of the icon) icon to "auto". This is just one of the possible solutions.

`
 span[data-component="icon"] {
  margin-left:  'auto'
}
`

`
              <Button
                buttonType="primary"
                iconType="caret_down"
                iconPosition="after"
                fullWidth={isSmallScreen}
                spaceBetween={true} // <== new property to set it
               >
                text
              </Button>
`

### CodeSandbox or Storybook URL

_No response_

### Anything else we should know?

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.
Make `MultiActionButton` accept `fullWidth` prop
### Desired behaviour

I would love the `MultiActionButton` to accept the `fullWidth` prop similarly to how a regular `Button` does, so it can span the whole available space eg on mobile views.

### Current behaviour

Currently the `MultiActionButton` itself does not accept the `fullWidth` prop and it is only available on the descendant `Button`s which roll down as options. 

### Suggested Solution

_No response_

### CodeSandbox or Storybook URL

_No response_

### Anything else we should know?

_No response_

### Confidentiality

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

Pull request description:
feat(multi-action-button): surface width prop to allow width to be set for component
fix #5547, fix #5672

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes.

If applicable, add screenshots of a codesandbox to help explain your request. You can paste these directly into GitHub.

Please DO NOT share screenshots or the source code of your project.

You can create a codesandbox to show the behaviour before/after this pull request by forking this template https://codesandbox.io/s/carbon-quickstart-j5pb2

If you include a CodeSandbox link, the bot will fork it with the new built version of carbon.
If you have a commit that includes fixes #XXXX and issue #XXXX has a CodeSandbox link in the body, the bot will fork
it with the new built version of carbon.
-->

Adds width prop to component to allow consumers to set a custom width. Also changes justify-content: space-between to default styling behaviour of `Button` components when the prop is passed.

![image](https://user-images.githubusercontent.com/114918852/204844059-a6c5fce2-9db2-4988-a0df-7e4d6c566b3f.png)

### Current behaviour

<!--
A clear and concise description of the behaviour before this change.

If applicable, add screenshots. You can paste these directly into GitHub.
-->

No support for setting a custom width. Also, without change to default styling, Text and Icons within the `Button` component remain centered when a wider width is used.

![image](https://user-images.githubusercontent.com/114918852/204844439-4ffc71b9-f263-4963-9270-a4e3cd38bcdb.png)

### 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] All themes are supported if required
- [x] Unit tests added or updated if required
- [x] Cypress automation tests added or updated if required
- [x] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required


#### QA

- [ ] Tested in CodeSandbox/storybook
- [ ] Add new Cypress 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? -->

Refer to customWidth story

The following CodeSandbox is an example of the broken behaviour.
You can see the new behaviour by looking at the version in the comment by `codesandbox[bot]`.

<!-- Add CodeSandbox here -->


Patch:
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 7462a7e93..49e5eacf5 100644
--- a/src/components/multi-action-button/multi-action-button.component.tsx
+++ b/src/components/multi-action-button/multi-action-button.component.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useRef, useMemo } from "react";
-
+import { WidthProps } from "styled-system";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import { SplitButtonProps } from "../split-button";
 import {
@@ -16,7 +16,8 @@ import {
 import useMenuKeyboardNavigation from "../../hooks/__internal__/useMenuKeyboardNavigation";
 
 export interface MultiActionButtonProps
-  extends Omit<SplitButtonProps, "buttonType"> {
+  extends WidthProps,
+    Omit<SplitButtonProps, "buttonType"> {
   /** Button type: "primary" | "secondary" | "tertiary" */
   buttonType?: "primary" | "secondary" | "tertiary";
   /** Second text child, renders under main text, only when size is "large" */
@@ -31,6 +32,7 @@ export const MultiActionButton = ({
   children,
   text,
   subtext,
+  width,
   "data-element": dataElement,
   "data-role": dataRole,
   ...rest
@@ -155,6 +157,7 @@ export const MultiActionButton = ({
       data-element={dataElement}
       data-role={dataRole}
       displayed={showAdditionalButtons}
+      width={width}
       {...filterStyledSystemMarginProps(rest)}
     >
       <Button
diff --git a/src/components/multi-action-button/multi-action-button.spec.tsx b/src/components/multi-action-button/multi-action-button.spec.tsx
index a9a20ac5d..d98298449 100644
--- a/src/components/multi-action-button/multi-action-button.spec.tsx
+++ b/src/components/multi-action-button/multi-action-button.spec.tsx
@@ -672,4 +672,30 @@ describe("MultiActionButton", () => {
       expect(tempWrapper.contains("Some string")).toBe(true);
     });
   });
+
+  describe("when width is passed", () => {
+    it("justify-content on StyledButton set to space-between", () => {
+      wrapper = render({ width: "100%" }, mount);
+
+      assertStyleMatch(
+        {
+          justifyContent: "space-between",
+        },
+        wrapper.find(StyledMultiActionButton),
+        { modifier: `${StyledButton}` }
+      );
+    });
+
+    it("width on StyledButton set to 100%", () => {
+      wrapper = render({ width: "100%" }, mount);
+
+      assertStyleMatch(
+        {
+          width: "100%",
+        },
+        wrapper.find(StyledMultiActionButton),
+        { modifier: `${StyledButton}` }
+      );
+    });
+  });
 });
diff --git a/src/components/multi-action-button/multi-action-button.stories.mdx b/src/components/multi-action-button/multi-action-button.stories.mdx
index 1afeb80ff..a66467d2d 100644
--- a/src/components/multi-action-button/multi-action-button.stories.mdx
+++ b/src/components/multi-action-button/multi-action-button.stories.mdx
@@ -47,6 +47,15 @@ import MultiActionButton from "carbon-react/lib/components/multi-action-button";
   <Story name="disabled" story={stories.Disabled} />
 </Canvas>
 
+### Custom width
+
+Numbers from 0-1 are converted to percentage widths. Numbers greater than 1 are converted to pixel values. 
+String values are passed as raw CSS values. `size` prop can still be used to set desired height.
+
+<Canvas>
+  <Story name="custom width" story={stories.CustomWidth} />
+</Canvas>
+
 ### Button types
 
 <Canvas>
@@ -84,8 +93,8 @@ Subtext only works when `size` is `large`
 
 ### MultiActionButton
 
-<StyledSystemProps of={MultiActionButton} margin noHeader />
+<StyledSystemProps of={MultiActionButton} width noHeader margin/>
 
 ### Button
 
-<ArgsTable of={Button} />
+<ArgsTable of={Button} exclude={["fullWidth"]} />
diff --git a/src/components/multi-action-button/multi-action-button.stories.tsx b/src/components/multi-action-button/multi-action-button.stories.tsx
index 35400365c..eeee01a2d 100644
--- a/src/components/multi-action-button/multi-action-button.stories.tsx
+++ b/src/components/multi-action-button/multi-action-button.stories.tsx
@@ -44,6 +44,19 @@ export const Sizes = () => {
   );
 };
 
+export const CustomWidth: ComponentStory<typeof MultiActionButton> = (args) => (
+  <MultiActionButton {...args}>
+    <Button href="#">Button 1</Button>
+    <Button>Button 2</Button>
+    <Button>Button 3</Button>
+  </MultiActionButton>
+);
+
+CustomWidth.args = {
+  text: "Multi Action Button",
+  width: 0.7,
+};
+
 export const ButtonTypes = () => {
   return (["primary", "secondary", "tertiary"] as const).map(
     (buttonType: MultiActionButtonProps["buttonType"]) => (
diff --git a/src/components/multi-action-button/multi-action-button.style.ts b/src/components/multi-action-button/multi-action-button.style.ts
index cdffdc4fa..09237a19f 100644
--- a/src/components/multi-action-button/multi-action-button.style.ts
+++ b/src/components/multi-action-button/multi-action-button.style.ts
@@ -3,8 +3,10 @@ import { margin } from "styled-system";
 import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
+import { MultiActionButtonProps } from "./multi-action-button.component";
+import computeWidth from "../../style/utils/width";
 
-type StyledMultiActionButtonProps = {
+type StyledMultiActionButtonProps = Pick<MultiActionButtonProps, "width"> & {
   displayed: boolean;
 };
 
@@ -14,6 +16,16 @@ const StyledMultiActionButton = styled.div<StyledMultiActionButtonProps>`
   display: inline-block;
   position: relative;
 
+  ${({ width }) =>
+    width &&
+    css`
+    ${computeWidth({ width })}
+
+    ${StyledButton} {
+      width: 100%
+      justify-content: space-between;
+    }`}
+
   & > ${StyledButton} {
     margin: 0;
 


Test patch:
diff --git a/src/components/multi-action-button/multi-action-button.test.js b/src/components/multi-action-button/multi-action-button.test.js
index 16df26f41..0eb1a7fa3 100644
--- a/src/components/multi-action-button/multi-action-button.test.js
+++ b/src/components/multi-action-button/multi-action-button.test.js
@@ -181,290 +181,308 @@ context("Tests for MultiActionButton component", () => {
             .and("be.visible");
         });
     });
-  });
 
-  describe("pressing ArrowUp while MultiActionButton is open", () => {
-    it("should move focus to previous child button and should not loop to last button when first is focused", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
+    it("when width is passed, should render Button with justify-content: space-between", () => {
+      CypressMountWithProviders(<MultiActionButtonList width="70%" />);
+
+      multiActionButton().should(
+        "have.css",
+        "justify-content",
+        "space-between"
       );
+    });
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(2).focus();
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", keyCode("uparrow"));
-          multiActionButtonList().eq(1).should("be.focused");
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", keyCode("uparrow"));
-          multiActionButtonList().eq(0).should("be.focused");
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", keyCode("uparrow"));
-          multiActionButtonList().eq(0).should("be.focused");
-        });
+    it("when width is passed, should render Button parent with specified width (70% / 945px) ", () => {
+      CypressMountWithProviders(<MultiActionButtonList width="70%" />);
+
+      multiActionButton().then(($el) => {
+        useJQueryCssValueAndAssert($el, "width", 956);
+      });
     });
   });
+});
 
-  describe("pressing shift and tab while MultiActionButton is open", () => {
-    it("should move focus to previous child button and focus the main button when pressed and first button is focused", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing ArrowUp while MultiActionButton is open", () => {
+  it("should move focus to previous child button and should not loop to last button when first is focused", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(1).focus();
-          multiActionButton().eq(0).tab({ shift: true });
-          multiActionButtonList().eq(0).should("be.focused");
-          multiActionButton().eq(0).tab({ shift: true });
-          multiActionButton().eq(0).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(2).focus();
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", keyCode("uparrow"));
+        multiActionButtonList().eq(1).should("be.focused");
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", keyCode("uparrow"));
+        multiActionButtonList().eq(0).should("be.focused");
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", keyCode("uparrow"));
+        multiActionButtonList().eq(0).should("be.focused");
+      });
   });
+});
 
-  describe("pressing ArrowDown while MultiActionButton is open", () => {
-    it("should move focus to next child button and should not loop to first button when last is focused", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing shift and tab while MultiActionButton is open", () => {
+  it("should move focus to previous child button and focus the main button when pressed and first button is focused", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(0).focus();
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", keyCode("downarrow"));
-          multiActionButtonList().eq(1).should("be.focused");
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", keyCode("downarrow"));
-          multiActionButtonList().eq(2).should("be.focused");
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", keyCode("downarrow"));
-          multiActionButtonList().eq(2).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(1).focus();
+        multiActionButton().eq(0).tab({ shift: true });
+        multiActionButtonList().eq(0).should("be.focused");
+        multiActionButton().eq(0).tab({ shift: true });
+        multiActionButton().eq(0).should("be.focused");
+      });
   });
+});
 
-  describe("pressing tab while MultiActionButton is open", () => {
-    it("should move focus to next child button and to second MultiActionButton when end of list reached", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing ArrowDown while MultiActionButton is open", () => {
+  it("should move focus to next child button and should not loop to first button when last is focused", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(1).focus();
-          multiActionButton().eq(0).tab();
-          multiActionButtonList().eq(2).should("be.focused");
-          multiActionButton().eq(0).tab();
-          multiActionButton().eq(1).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(0).focus();
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", keyCode("downarrow"));
+        multiActionButtonList().eq(1).should("be.focused");
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", keyCode("downarrow"));
+        multiActionButtonList().eq(2).should("be.focused");
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", keyCode("downarrow"));
+        multiActionButtonList().eq(2).should("be.focused");
+      });
   });
+});
 
-  describe("pressing metaKey + ArrowUp while MultiActionButton is open", () => {
-    it("should move focus to first child button", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing tab while MultiActionButton is open", () => {
+  it("should move focus to next child button and to second MultiActionButton when end of list reached", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(2).focus();
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", { metaKey: true, key: "ArrowUp" });
-          multiActionButtonList().eq(0).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(1).focus();
+        multiActionButton().eq(0).tab();
+        multiActionButtonList().eq(2).should("be.focused");
+        multiActionButton().eq(0).tab();
+        multiActionButton().eq(1).should("be.focused");
+      });
   });
+});
 
-  describe("pressing ctrlKey + ArrowUp while MultiActionButton is open", () => {
-    it("should move focus to first child button", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing metaKey + ArrowUp while MultiActionButton is open", () => {
+  it("should move focus to first child button", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(2).focus();
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", { ctrlKey: true, key: "ArrowUp" });
-          multiActionButtonList().eq(0).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(2).focus();
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", { metaKey: true, key: "ArrowUp" });
+        multiActionButtonList().eq(0).should("be.focused");
+      });
   });
+});
 
-  describe("pressing Home while MultiActionButton is open", () => {
-    it("should move focus to first child button", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing ctrlKey + ArrowUp while MultiActionButton is open", () => {
+  it("should move focus to first child button", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(2).focus();
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", keyCode("Home"));
-          multiActionButtonList().eq(0).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(2).focus();
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", { ctrlKey: true, key: "ArrowUp" });
+        multiActionButtonList().eq(0).should("be.focused");
+      });
   });
+});
 
-  describe("pressing metaKey + ArrowDown while MultiActionButton is open", () => {
-    it("should move focus to last child button", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing Home while MultiActionButton is open", () => {
+  it("should move focus to first child button", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(0).focus();
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", { metaKey: true, key: "ArrowDown" });
-          multiActionButtonList().eq(2).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(2).focus();
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", keyCode("Home"));
+        multiActionButtonList().eq(0).should("be.focused");
+      });
   });
+});
 
-  describe("pressing ctrlKey + ArrowDown while MultiActionButton is open", () => {
-    it("should move focus to last child button", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing metaKey + ArrowDown while MultiActionButton is open", () => {
+  it("should move focus to last child button", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(0).focus();
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", { ctrlKey: true, key: "ArrowDown" });
-          multiActionButtonList().eq(2).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(0).focus();
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", { metaKey: true, key: "ArrowDown" });
+        multiActionButtonList().eq(2).should("be.focused");
+      });
   });
+});
 
-  describe("pressing End while MultiActionButton is open", () => {
-    it("should move focus to last child button", () => {
-      CypressMountWithProviders(
-        <>
-          <MultiActionButtonList />
-          <MultiActionButtonList />
-        </>
-      );
+describe("pressing ctrlKey + ArrowDown while MultiActionButton is open", () => {
+  it("should move focus to last child button", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(0).focus();
-          multiActionButtonListContainer()
-            .eq(0)
-            .trigger("keydown", keyCode("End"));
-          multiActionButtonList().eq(2).should("be.focused");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(0).focus();
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", { ctrlKey: true, key: "ArrowDown" });
+        multiActionButtonList().eq(2).should("be.focused");
+      });
   });
+});
 
-  describe("Pressing esc while MultiActionButton is open", () => {
-    it("should close MultiActionButton", () => {
-      CypressMountWithProviders(<MultiActionButtonList />);
+describe("pressing End while MultiActionButton is open", () => {
+  it("should move focus to last child button", () => {
+    CypressMountWithProviders(
+      <>
+        <MultiActionButtonList />
+        <MultiActionButtonList />
+      </>
+    );
 
-      multiActionButton()
-        .eq(0)
-        .trigger("mouseover")
-        .then(() => {
-          multiActionButtonList().eq(1).focus();
-          multiActionButton().eq(0).trigger("keydown", keyCode("Esc"));
-          multiActionButtonListContainer().should("not.exist");
-        });
-    });
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(0).focus();
+        multiActionButtonListContainer()
+          .eq(0)
+          .trigger("keydown", keyCode("End"));
+        multiActionButtonList().eq(2).should("be.focused");
+      });
+  });
+});
+
+describe("pressing esc while MultiActionButton is open", () => {
+  it("should close MultiActionButton", () => {
+    CypressMountWithProviders(<MultiActionButtonList />);
+
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(1).focus();
+        multiActionButton().eq(0).trigger("keydown", keyCode("Esc"));
+        multiActionButtonListContainer().should("not.exist");
+      });
+  });
+});
+
+describe("clicking one of the additional buttons", () => {
+  it("should close MultiActionButton", () => {
+    CypressMountWithProviders(<MultiActionButtonList />);
+
+    multiActionButton()
+      .eq(0)
+      .trigger("mouseover")
+      .then(() => {
+        multiActionButtonList().eq(0).click();
+
+        multiActionButtonListContainer().should("not.exist");
+      });
   });
+});
 
-  describe("clicking one of the additional buttons", () => {
-    it("should close MultiActionButton", () => {
+describe.each(["Enter", "Space", "downarrow"])(
+  "pressing %s key on the main button",
+  (key) => {
+    it("opens MultiActionButton list and focuses first button", () => {
       CypressMountWithProviders(<MultiActionButtonList />);
 
       multiActionButton()
         .eq(0)
-        .trigger("mouseover")
+        .trigger("keydown", keyCode(key))
         .then(() => {
-          multiActionButtonList().eq(0).click();
-
-          multiActionButtonListContainer().should("not.exist");
+          multiActionButtonList().eq(0).should("be.focused");
         });
     });
-  });
-
-  describe.each(["Enter", "Space", "downarrow"])(
-    "pressing %s key on the main button",
-    (key) => {
-      it("opens MultiActionButton list and focuses first button", () => {
-        CypressMountWithProviders(<MultiActionButtonList />);
-
-        multiActionButton()
-          .eq(0)
-          .trigger("keydown", keyCode(key))
-          .then(() => {
-            multiActionButtonList().eq(0).should("be.focused");
-          });
-      });
-    }
-  );
-});
+  }
+);
 
 // https://github.com/cypress-io/cypress/issues/21511
 describe("should check colors for MultiActionButton component", () => {