fix(tabs): click on navigation button in Tabs submit the form

added type button to the navigation buttons to prevent accidental from submission fixes: #7142
Sage · Jan 14, 2025 · 082e14c · 082e14c
1 parent cea1334
commit 082e14c
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 1 deletion.
diff --git a/src/components/tabs/__internal__/tabs-header/tabs-header.component.tsx b/src/components/tabs/__internal__/tabs-header/tabs-header.component.tsx
@@ -112,6 +112,7 @@ const TabsHeader = ({
           title="Scroll Tabs Left"
           id="tab-navigation-button-left"
           data-role="tab-navigation-button-left"
+          type="button"
           onClick={() => {
             /* istanbul ignore if */
             if (current) {
@@ -147,6 +148,7 @@ const TabsHeader = ({
           title="Scroll Tabs Right"
           id="tab-navigation-button-right"
           data-role="tab-navigation-button-right"
+          type="button"
           onClick={() => {
             /* istanbul ignore if */
             if (current) {

diff --git a/src/components/tabs/tabs-test.stories.tsx b/src/components/tabs/tabs-test.stories.tsx
@@ -2,14 +2,15 @@ import React from "react";
 import { Tabs, Tab, TabsProps, TabProps } from ".";
 import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
 import Box from "../box";
+import Form from "../form";
 
 export default {
   title: "Tabs/Test",
   includeStories: [
     "Default",
     "TabsInSidebar",
     "TabsInSidebarPositionedLeft",
-    "WithHorizontalScrollbar",
+    "WithHorizontalScrollbarInsideForm",
   ],
   parameters: {
     info: { disable: true },
@@ -262,3 +263,85 @@ TabsInSidebarPositionedLeft.parameters = {
     disableSnapshot: false,
   },
 };
+
+export const WithHorizontalScrollbarInsideForm = (args: TabsProps) => {
+  const onSubmit = () => {};
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <Box
+        margin="var(--spacing200)"
+        display="flex"
+        flexDirection="column"
+        gap="var(--spacing200)"
+        minWidth="320px"
+        maxWidth="1024px"
+      >
+        <Tabs {...args}>
+          <Tab
+            errorMessage="error"
+            warningMessage="warning"
+            infoMessage="info"
+            tabId="tab-1"
+            title="Tab 1"
+            key="tab-1"
+          >
+            Content for tab 1
+          </Tab>
+          <Tab
+            errorMessage="error"
+            warningMessage="warning"
+            infoMessage="info"
+            tabId="tab-2"
+            title="Tab 2"
+            key="tab-2"
+          >
+            Content for tab 2
+          </Tab>
+          <Tab
+            errorMessage="error"
+            warningMessage="warning"
+            infoMessage="info"
+            tabId="tab-3"
+            title="Tab 3"
+            key="tab-3"
+          >
+            Content for tab 3
+          </Tab>
+          <Tab
+            errorMessage="error"
+            warningMessage="warning"
+            infoMessage="info"
+            tabId="tab-4"
+            title="Tab 4"
+            key="tab-4"
+          >
+            Content for tab 4
+          </Tab>
+          <Tab
+            errorMessage="error"
+            warningMessage="warning"
+            infoMessage="info"
+            tabId="tab-5"
+            title="Tab 5"
+            key="tab-5"
+          >
+            Content for tab 5
+          </Tab>
+          <Tab
+            errorMessage="error"
+            warningMessage="warning"
+            infoMessage="info"
+            tabId="tab-6"
+            title="Tab 6"
+            key="tab-6"
+            href="https://carbon.sage.com/"
+          />
+        </Tabs>
+      </Box>
+    </Form>
+  );
+};
+
+WithHorizontalScrollbarInsideForm.storyName =
+  "WithHorizontalScrollbarInsideForm";