From dc18cc5061d0667ad586b964a3f5a07ff323fc34 Mon Sep 17 00:00:00 2001
From: Michael Barton <michael@mbarton.cc>
Date: Mon, 24 Jun 2024 13:16:59 +0100
Subject: [PATCH] If wrapped in form don't submit when clicking buttons

---
 src/CentileChart/CentileChart.test.tsx       | 17 ++++++++++++++++-
 src/SubComponents/CommonButton.tsx           |  7 +++++++
 src/SubComponents/StyledErrorButton.tsx      |  3 ++-
 src/SubComponents/StyledFullScreenButton.tsx |  3 ++-
 src/SubComponents/StyledResetZoomButton.tsx  |  3 ++-
 src/SubComponents/StyledShareButton.tsx      |  3 ++-
 6 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 src/SubComponents/CommonButton.tsx

diff --git a/src/CentileChart/CentileChart.test.tsx b/src/CentileChart/CentileChart.test.tsx
index 615ca1b..1398a00 100644
--- a/src/CentileChart/CentileChart.test.tsx
+++ b/src/CentileChart/CentileChart.test.tsx
@@ -1005,7 +1005,14 @@ describe("All tests relating to testing the copy button", () => {
       fireEvent.mouseOver(screen.getByTestId('copy-button'));
       expect(screen.getByTestId('copy-button')).toHaveStyle('background-color: ButtonFace');
     })
-
+    it("should not trigger form submission when copy button clicked", () => {
+      const onSubmit = jest.fn();
+      render(<form onSubmit={onSubmit}>
+        <CentileChart {...props} />
+      </form>);
+      fireEvent.click(screen.getByTestId('copy-button'));
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
 })
 
 describe("Tests relating to exportChartCallback function", () => {
@@ -1132,6 +1139,14 @@ describe("All tests relating to the zoom functionality where enableZoom needs to
     fireEvent.click(screen.getByTestId('zoom-button'));
     expect(screen.queryByTestId("resetzoom-button")).toBeInTheDocument();
   })
+  it("should not trigger form submission when zoom button clicked", () => {
+    const onSubmit = jest.fn();
+    render(<form onSubmit={onSubmit}>
+      <CentileChart {...props} />
+    </form>);
+    fireEvent.click(screen.getByTestId('zoom-button'));
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
 })
 
 describe("Tests relating to negative settings on the zoom button", () => {
diff --git a/src/SubComponents/CommonButton.tsx b/src/SubComponents/CommonButton.tsx
new file mode 100644
index 0000000..c29f531
--- /dev/null
+++ b/src/SubComponents/CommonButton.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export const CommonButton = ({ children, ...props }) => {
+    // if chart wrapped in a form tag prevent submitting it
+    // as the default button type=submit
+    return <button {...props} type="button">{children}</button>;
+}
\ No newline at end of file
diff --git a/src/SubComponents/StyledErrorButton.tsx b/src/SubComponents/StyledErrorButton.tsx
index 88e1e42..8234190 100644
--- a/src/SubComponents/StyledErrorButton.tsx
+++ b/src/SubComponents/StyledErrorButton.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import { CommonButton } from './CommonButton';
 
-export const StyledErrorButton = styled.button<{
+export const StyledErrorButton = styled(CommonButton)<{
     $activeColour: string;
     $inactiveColour: string;
     fontFamily: string;
diff --git a/src/SubComponents/StyledFullScreenButton.tsx b/src/SubComponents/StyledFullScreenButton.tsx
index 261ad77..5b84950 100644
--- a/src/SubComponents/StyledFullScreenButton.tsx
+++ b/src/SubComponents/StyledFullScreenButton.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import { CommonButton } from './CommonButton';
 
-export const StyledFullScreenButton = styled.button<{
+export const StyledFullScreenButton = styled(CommonButton)<{
     $color?: string,
     size?: number
 }>`
diff --git a/src/SubComponents/StyledResetZoomButton.tsx b/src/SubComponents/StyledResetZoomButton.tsx
index dd54310..5b710e9 100644
--- a/src/SubComponents/StyledResetZoomButton.tsx
+++ b/src/SubComponents/StyledResetZoomButton.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import { CommonButton } from './CommonButton';
 
-export const StyledResetZoomButton = styled.button<{
+export const StyledResetZoomButton = styled(CommonButton)<{
     $activeColour: string;
     $inactiveColour: string;
     $fontFamily: string;
diff --git a/src/SubComponents/StyledShareButton.tsx b/src/SubComponents/StyledShareButton.tsx
index a81d822..d06470e 100644
--- a/src/SubComponents/StyledShareButton.tsx
+++ b/src/SubComponents/StyledShareButton.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import { CommonButton } from './CommonButton';
 
-export const StyledShareButton = styled.button<{
+export const StyledShareButton = styled(CommonButton)<{
     $color?: string,
     size?: number
 }>`