Merge pull request #89 from rcpch/mbarton/wrapped-in-form-fix

If wrapped in form don't submit when clicking buttons

Author: mbarton

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", () => {

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>;
+}

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;

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
 }>`

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;

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
 }>`