Fix #216

src/devToolUI.tsx

@@ -90,6 +90,7 @@ export const DevToolUI: React.FC<DevtoolUIProps> = ({
             background: 'none',
             ...styles?.button,
           }}
+          type="button"
         >
           <Logo actions={actions} />
         </Button>

src/formStateTable.tsx

@@ -130,6 +130,7 @@ const FormStateTable = ({
       onClick={() => {
         setShowFormState(!showFormState);
       }}
+      type="button"
     >
       <span
         style={{

src/panel.tsx

@@ -148,6 +148,7 @@ const Panel = ({ control, control: { _fields } }: { control: Control }) => {
           }}
           title="Update values and state the form"
           onClick={() => setData({})}
+          type="button"
         >
           ♺ REFRESH
         </Button>
@@ -162,6 +163,7 @@ const Panel = ({ control, control: { _fields } }: { control: Control }) => {
           onClick={() => {
             actions.setCollapse(!state.isCollapse);
           }}
+          type="button"
         >
           {state.isCollapse ? '[-] COLLAPSE' : '[+] EXPAND'}
         </Button>

src/panelTable.tsx

@@ -91,6 +91,7 @@ const PanelTable = ({
                 textAlign: 'center',
                 marginRight: 8,
               }}
+              type="button"
             >
               {collapse ? '+' : '-'}
             </Button>
@@ -114,6 +115,7 @@ const PanelTable = ({
                   ? {}
                   : { cursor: 'not-allowed', background: colors.lightBlue }),
               }}
+              type="button"
             >
               {isNative ? 'Native' : 'Custom'}
             </Button>

src/styled.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 import colors from './colors';
@@ -8,16 +7,7 @@ export const paraGraphDefaultStyle = {
   lineHeight: '20px',
 };
 
-interface ButtonBaseProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
-}
-
-const ButtonBase = ({ type = 'button', ...props }: ButtonBaseProps) => {
-  return <ButtonBase type={type} {...props} />;
-};
-
-const Button = styled(ButtonBase)<{ hideBackground?: boolean }>`
+const Button = styled.button<{ hideBackground?: boolean }>`
   appearance: none;
   margin: 0;
   border: 0;