fix: Interacting form submits early

Author: kadiryazici

.eslintrc.json

@@ -1,6 +1,8 @@
 {
   "root": true,
-  "ignorePatterns": ["!.storybook"],
+  "ignorePatterns": [
+    "!.storybook"
+  ],
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": "latest"
@@ -18,19 +20,42 @@
         "ignoreRestSiblings": true
       }
     ],
-    "import/extensions": ["error", "ignorePackages"],
-    "import/no-duplicates": ["error", { "prefer-inline": true }],
+    "import/extensions": [
+      "error",
+      "ignorePackages"
+    ],
+    "import/no-duplicates": [
+      "error",
+      {
+        "prefer-inline": true
+      }
+    ],
     "simple-import-sort/imports": [
       "error",
       {
         "groups": [
-          ["^\\u0000"],
-          ["^node:"],
-          ["^@?\\w"],
-          ["^@seamapi/react/"],
-          ["^fixtures/", "^lib/"],
-          ["^"],
-          ["^\\."]
+          [
+            "^\\u0000"
+          ],
+          [
+            "^node:"
+          ],
+          [
+            "^@?\\w"
+          ],
+          [
+            "^@seamapi/react/"
+          ],
+          [
+            "^fixtures/",
+            "^lib/"
+          ],
+          [
+            "^"
+          ],
+          [
+            "^\\."
+          ]
         ]
       }
     ],
@@ -39,11 +64,21 @@
   },
   "overrides": [
     {
-      "files": ["*.js", "*.mjs", "*.cjs"],
-      "extends": ["standard", "prettier"]
+      "files": [
+        "*.js",
+        "*.mjs",
+        "*.cjs"
+      ],
+      "extends": [
+        "standard",
+        "prettier"
+      ]
     },
     {
-      "files": ["*.ts", "*.tsx"],
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
       "extends": [
         "standard-with-typescript",
         "standard-jsx",
@@ -52,7 +87,10 @@
         "plugin:storybook/recommended",
         "prettier"
       ],
-      "plugins": ["simple-import-sort", "unused-imports"],
+      "plugins": [
+        "simple-import-sort",
+        "unused-imports"
+      ],
       "parserOptions": {
         "project": "./tsconfig.json"
       },
@@ -70,12 +108,14 @@
       },
       "overrides": [
         {
-          "files": ["**/*.stories.tsx"],
+          "files": [
+            "**/*.stories.tsx"
+          ],
           "rules": {
             "react-hooks/rules-of-hooks": "off"
           }
         }
       ]
     }
   ]
-}
+}

src/lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -46,7 +46,7 @@ export function FilterCategoryMenu({
       <p>{label}</p>
       <Menu
         renderButton={({ onOpen }) => (
-          <button onClick={onOpen}>
+          <button type='button' onClick={onOpen}>
             <span>{buttonLabel}</span>
             <ChevronDownIcon />
           </button>

src/lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.tsx

@@ -20,7 +20,7 @@ export function ShowAllDevicesButton({
   const label = expanded ? t.showLess : t.showAll(totalDeviceCount)
 
   return (
-    <button className='show-all-devices-button' onClick={onClick}>
+    <button type='button' className='show-all-devices-button' onClick={onClick}>
       <ChevronRightIcon /> {label}
     </button>
   )

src/lib/ui/Alert/Alert.tsx

@@ -49,7 +49,7 @@ function Action(props: ActionProps): JSX.Element | null {
 
   return (
     <div className='seam-alert-action-wrap'>
-      <button onClick={handleClick} className='seam-alert-action'>
+      <button type='button' onClick={handleClick} className='seam-alert-action'>
         {props.label}
       </button>
     </div>

src/lib/ui/IconButton.tsx

@@ -15,6 +15,7 @@ export function IconButton({
   return (
     <button
       {...props}
+        type='button'
       ref={elRef}
       className={classNames(
         'seam-icon-btn',

src/lib/ui/Snackbar/Snackbar.tsx

@@ -77,6 +77,7 @@ export function Snackbar({
         <div className='seam-snackbar-actions-wrap'>
           {action != null && (
             <button
+              type='button'
               className='seam-snackbar-action'
               onClick={handleActionClick}
             >
@@ -85,6 +86,7 @@ export function Snackbar({
           )}
           {!disableCloseButton && (
             <button
+              type='button'
               className='seam-snackbar-close-button'
               onClick={() => {
                 handleClose()

src/lib/ui/TabSet.tsx

@@ -102,6 +102,7 @@ function TabButton<TabType extends string>({
         'seam-tab-button',
         isActive && 'seam-tab-button-active'
       )}
+        type='button'
       onClick={handleClick}
     >
       <p className='seam-tab-button-label'>{title}</p>

src/lib/ui/TextButton.tsx

@@ -10,6 +10,6 @@ export function TextButton({
   ...buttonProps
 }: TextButtonProps): JSX.Element {
   return (
-    <button className={`seam-text-btn seam-color-${color}`} {...buttonProps} />
+    <button type='button' className={`seam-text-btn seam-color-${color}`} {...buttonProps} />
   )
 }

src/lib/ui/TextField/TextField.tsx

@@ -105,6 +105,7 @@ export const TextField = forwardRef<
           <div className='seam-adornment seam-end'>
             {clearable && (
               <button
+                type='button'
                 className={classNames({
                   'seam-hidden': valueIsEmpty,
                 })}

src/lib/ui/Tooltip/Tooltip.tsx

@@ -40,7 +40,7 @@ export function Tooltip({ children }: PropsWithChildren): JSX.Element {
   return (
     <div className='seam-tooltip'>
       <div className='seam-tooltip-trigger-wrap'>
-        <button onClick={handleToggle} className='seam-tooltip-button'>
+        <button type='button' onClick={handleToggle} className='seam-tooltip-button'>
           <div className='seam-tooltip-button-icon seam-tooltip-button-icon-default'>
             <InfoIcon />
           </div>