diff --git a/src/components/split-button/split-button-test.stories.mdx b/src/components/split-button/split-button-test.stories.js
similarity index 77%
rename from src/components/split-button/split-button-test.stories.mdx
rename to src/components/split-button/split-button-test.stories.js
index dd1bce8cfc..6fb26bdf0c 100644
--- a/src/components/split-button/split-button-test.stories.mdx
+++ b/src/components/split-button/split-button-test.stories.js
@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import React from "react";
import { action } from "@storybook/addon-actions";
import specialCharacters from "../../__internal__/utils/argTypes/specialCharacters";
@@ -13,15 +13,15 @@ import {
} from "./split-button.config";
import SplitButton from "./split-button.component";
-
+ },
+};
+/* eslint-disable react/prop-types */
export const SplitButtonStory = ({
buttonType,
dataElement,
@@ -68,6 +69,7 @@ export const SplitButtonStory = ({
iconType,
iconPosition,
...args
+ /* eslint-enable */
}) => {
return (
@@ -96,28 +98,20 @@ export const SplitButtonStory = ({
);
};
-# Split Button
-
-### Default
-
-
+SplitButtonStory.story = {
+ name: "default",
+ args: {
+ iconType: "",
+ iconPosition: "before",
+ buttonType: "secondary",
+ dataElement: "data-element",
+ dataRole: "",
+ disabled: false,
+ size: "medium",
+ align: "left",
+ text: "Example Split Button",
+ textSpecialCharacters: undefined,
+ subtext: "",
+ subtextSpecialCharacters: undefined,
+ },
+};
diff --git a/src/components/split-button/split-button.component.js b/src/components/split-button/split-button.component.js
index cc2bfa72aa..ada44ad754 100644
--- a/src/components/split-button/split-button.component.js
+++ b/src/components/split-button/split-button.component.js
@@ -1,6 +1,5 @@
import React, {
useContext,
- useEffect,
useCallback,
useMemo,
useRef,
@@ -61,7 +60,6 @@ const SplitButton = ({
const buttonContainer = useRef();
const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
const [minWidth, setMinWidth] = useState(0);
- const listening = useRef(false);
const hideButtons = useCallback(() => {
if (toggleButton.current === document.activeElement) return;
@@ -167,7 +165,8 @@ const SplitButton = ({
if (
Events.isEnterKey(ev) ||
Events.isSpaceKey(ev) ||
- Events.isDownKey(ev)
+ Events.isDownKey(ev) ||
+ Events.isUpKey(ev)
) {
ev.preventDefault();
diff --git a/src/components/split-button/split-button.spec.js b/src/components/split-button/split-button.spec.js
index 082f9376ee..c40954cf41 100644
--- a/src/components/split-button/split-button.spec.js
+++ b/src/components/split-button/split-button.spec.js
@@ -551,6 +551,7 @@ describe("SplitButton", () => {
["Enter", "Enter"],
["Space", " "],
["ArrowDown", "ArrowDown"],
+ ["ArrowUp", "ArrowUp"],
])(
"then the first additional button should be focused when %s key is pressed",
(name, key) => {
diff --git a/src/components/split-button/split-button.test.js b/src/components/split-button/split-button.test.js
index 905e42ac49..822e1f0498 100644
--- a/src/components/split-button/split-button.test.js
+++ b/src/components/split-button/split-button.test.js
@@ -414,7 +414,7 @@ context("Tests for Split Button component", () => {
});
});
- describe.each(["Enter", "Space", "downarrow"])(
+ describe.each(["Enter", "Space", "downarrow", "uparrow"])(
"pressing %s key on the main button",
(key) => {
it("opens SplitButton list and focuses first button", () => {