From 082e14c21904385fe35b69a0dd3d4c6806a53055 Mon Sep 17 00:00:00 2001
From: Mihai Albu <mihai.albu@sage.com>
Date: Tue, 14 Jan 2025 11:48:27 +0000
Subject: [PATCH] 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
---
 .../tabs-header/tabs-header.component.tsx     |  2 +
 src/components/tabs/tabs-test.stories.tsx     | 85 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 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
index 5996a4bced..eb500da4da 100644
--- 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
index 3ce2e49ec4..78bb8f99b8 100644
--- a/src/components/tabs/tabs-test.stories.tsx
+++ b/src/components/tabs/tabs-test.stories.tsx
@@ -2,6 +2,7 @@ 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",
@@ -9,7 +10,7 @@ export default {
     "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";