fix: Interacting form submits early (#684)

* fix: Interacting form submits early

* ci: Format code

---------

Co-authored-by: Seam Bot <[email protected]>

Author: kadiryazici

.eslintrc.json

@@ -19,7 +19,12 @@
       }
     ],
     "import/extensions": ["error", "ignorePackages"],
-    "import/no-duplicates": ["error", { "prefer-inline": true }],
+    "import/no-duplicates": [
+      "error",
+      {
+        "prefer-inline": true
+      }
+    ],
     "simple-import-sort/imports": [
       "error",
       {

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,10 @@ 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,11 @@ 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>