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>

src/lib/ui/device/EditableDeviceName.tsx

@@ -171,6 +171,7 @@ function IconButton(
   return (
     <button
       {...props}
+      type='button'
       className={classNames(
         'seam-editable-device-name-icon-button',
         props.className

src/lib/ui/layout/AccordionRow.tsx

@@ -19,7 +19,11 @@ export function AccordionRow({
 
   return (
     <div className='seam-accordion-row' aria-expanded={isExpanded}>
-      <button className='seam-accordion-row-trigger' onClick={toggle}>
+      <button
+        type='button'
+        className='seam-accordion-row-trigger'
+        onClick={toggle}
+      >
         <div className='seam-row-inner-wrap'>
           <p className='seam-row-label'>{label}</p>
           <div className='seam-row-trigger-left-content'>{leftContent}</div>

src/lib/ui/thermostat/ClimateModeMenu.tsx

@@ -35,6 +35,7 @@ export function ClimateModeMenu({
     <Menu
       renderButton={({ onOpen }) => (
         <button
+          type='button'
           style={style}
           onClick={onOpen}
           className={classNames(

src/lib/ui/thermostat/FanModeMenu.tsx

@@ -26,6 +26,7 @@ export function FanModeMenu({
     <Menu
       renderButton={({ onOpen }) => (
         <button
+          type='button'
           onClick={onOpen}
           className={classNames(
             'seam-fan-mode-menu-button',

src/lib/ui/thermostat/TemperatureControl.tsx

@@ -30,7 +30,11 @@ export function TemperatureControl({
 
   return (
     <div className='seam-temperature-control'>
-      <button className='seam-temperature-stepper-button' onClick={decrement}>
+      <button
+        type='button'
+        className='seam-temperature-stepper-button'
+        onClick={decrement}
+      >
         <TemperatureSubtractIcon />
       </button>
       <RangeSlider
@@ -43,7 +47,11 @@ export function TemperatureControl({
         }}
         unit={unit}
       />
-      <button className='seam-temperature-stepper-button' onClick={increment}>
+      <button
+        type='button'
+        className='seam-temperature-stepper-button'
+        onClick={increment}
+      >
         <TemperatureAddIcon />
       </button>
     </div>

src/lib/ui/thermostat/ThermostatCard.tsx

@@ -65,6 +65,7 @@ function Content(props: ThermostatCardProps): JSX.Element | null {
             onEdit={props.onEditName}
           />
           <button
+            type='button'
             onClick={toggleTemperatureUnit}
             className='seam-thermostat-temperature-toggle'
           >