From dda9504bdd9c219f55d0aa091684b4e8a02fbf40 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 16:35:42 +0100
Subject: [PATCH] fix(webapp): require explicit native button types (#4692)

## Summary

Add explicit types to native dashboard buttons and enforce
`react/button-has-type`.

This prevents action buttons from accidentally submitting a surrounding
form. Shared button primitives retain their caller-selected submit and
reset semantics with documented lint exceptions.

Base: [#4691](https://github.com/triggerdotdev/trigger.dev/pull/4691)
---
 .oxlintrc.json                                                  | 1 +
 apps/webapp/app/components/code/TSQLResultsTable.tsx            | 1 +
 apps/webapp/app/components/navigation/SideMenuItem.tsx          | 2 ++
 apps/webapp/app/components/primitives/AppliedFilter.tsx         | 1 +
 apps/webapp/app/components/primitives/Buttons.tsx               | 2 ++
 apps/webapp/app/components/primitives/Popover.tsx               | 2 ++
 apps/webapp/app/components/primitives/Select.tsx                | 1 +
 apps/webapp/app/components/primitives/Table.tsx                 | 2 ++
 apps/webapp/app/components/primitives/Toast.tsx                 | 1 +
 apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx        | 1 +
 apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx      | 1 +
 .../route.tsx                                                   | 1 +
 apps/webapp/app/routes/storybook.tsql-editor/route.tsx          | 1 +
 13 files changed, 17 insertions(+)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index ee5c80fb1..17a03ad38 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -115,6 +115,7 @@
     {
       "files": ["apps/webapp/app/**/*.ts", "apps/webapp/app/**/*.tsx"],
       "rules": {
+        "react/button-has-type": "error",
         "react/jsx-no-useless-fragment": "error",
         "react/no-unstable-nested-components": "error",
         "react/rules-of-hooks": "error",
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 8556d1ff2..6da3caee0 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -970,6 +970,7 @@ function HeaderCellContent({
       )}
       {onFilterClick && (
         <button
+          type="button"
           onClick={(e) => {
             e.stopPropagation();
             onFilterClick();
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index 189a23da9..6212402f4 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -240,6 +240,7 @@ export function SideMenuItem({
 }
 
 /** Button styled to match {@link SideMenuItem}, for entries that open a dialog rather than navigate. */
+/* oxlint-disable react/button-has-type -- Callers can select button, reset, or submit semantics. */
 export const SideMenuItemButton = forwardRef<
   HTMLButtonElement,
   {
@@ -276,3 +277,4 @@ export const SideMenuItemButton = forwardRef<
     </button>
   );
 });
+/* oxlint-enable react/button-has-type */
diff --git a/apps/webapp/app/components/primitives/AppliedFilter.tsx b/apps/webapp/app/components/primitives/AppliedFilter.tsx
index 6390a5826..cfb000164 100644
--- a/apps/webapp/app/components/primitives/AppliedFilter.tsx
+++ b/apps/webapp/app/components/primitives/AppliedFilter.tsx
@@ -67,6 +67,7 @@ export function AppliedFilter({
       </div>
       {removable && (
         <button
+          type="button"
           className={cn(
             "group flex size-6 items-center justify-center focus-custom",
             variantClassName.clear
diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
index 1dcac677d..d6ec92f79 100644
--- a/apps/webapp/app/components/primitives/Buttons.tsx
+++ b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -374,6 +374,7 @@ type ButtonPropsType = Pick<
 > &
   React.ComponentProps<typeof ButtonContent>;
 
+/* oxlint-disable react/button-has-type -- Callers can select button, reset, or submit semantics. */
 export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
   ({ type, disabled, autoFocus, onClick, "aria-label": ariaLabel, ...props }, ref) => {
     const innerRef = useRef<HTMLButtonElement>(null);
@@ -435,6 +436,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
     return buttonElement;
   }
 );
+/* oxlint-enable react/button-has-type */
 
 type LinkPropsType = Pick<
   LinkProps,
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index dcdb10768..0f1a82df3 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -51,6 +51,7 @@ function PopoverSectionHeader({
   );
 }
 
+/* oxlint-disable react/button-has-type -- The trigger supports form button semantics. */
 const PopoverMenuItem = React.forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
   {
@@ -141,6 +142,7 @@ const PopoverMenuItem = React.forwardRef<
   }
 );
 PopoverMenuItem.displayName = "PopoverMenuItem";
+/* oxlint-enable react/button-has-type */
 
 function PopoverCustomTrigger({
   isOpen,
diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx
index 446a6fc5f..ab875dc39 100644
--- a/apps/webapp/app/components/primitives/Select.tsx
+++ b/apps/webapp/app/components/primitives/Select.tsx
@@ -582,6 +582,7 @@ export function SelectButtonItem({
 }: SelectButtonItemProps) {
   const render = (
     <button
+      type="button"
       onClick={onClick}
       className={cn("block w-full text-left", selectItemClasses, props.className)}
     />
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 995765772..9ade6c34b 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -433,6 +433,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
             <div className={cn(flexClasses, "gap-2")}>
               {leadingContent}
               <button
+                type="button"
                 onClick={onClick}
                 className={cn(
                   "inline-flex cursor-pointer items-center gap-2 focus:outline-hidden",
@@ -446,6 +447,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
             </div>
           ) : (
             <button
+              type="button"
               onClick={onClick}
               className={cn("cursor-pointer focus:outline-hidden", flexClasses, actionClassName)}
               tabIndex={isTabbableCell ? 0 : -1}
diff --git a/apps/webapp/app/components/primitives/Toast.tsx b/apps/webapp/app/components/primitives/Toast.tsx
index 2dfdbbe21..9547d7f0b 100644
--- a/apps/webapp/app/components/primitives/Toast.tsx
+++ b/apps/webapp/app/components/primitives/Toast.tsx
@@ -128,6 +128,7 @@ export function ToastUI({
           {actionNode}
         </div>
         <button
+          type="button"
           className={cn(
             "-mr-1 ms-auto rounded p-2 text-text-dimmed transition hover:text-text-bright",
             title && "-mt-1"
diff --git a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
index ae46cbe86..8d144d596 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
@@ -344,6 +344,7 @@ export function ToolUseRow({ tool }: { tool: ToolUse }) {
           >
             {availableTabs.map((tab) => (
               <button
+                type="button"
                 key={tab}
                 onClick={() => handleTabClick(tab)}
                 className={`px-2.5 py-1 text-[11px] capitalize transition-colors ${
diff --git a/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx b/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx
index f7b09b6da..beafcbb70 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx
@@ -47,6 +47,7 @@ function ToolDefRow({ def, wasCalled }: { def: ToolDefinition; wasCalled: boolea
       {def.parametersJson && (
         <div className="pl-3.5">
           <button
+            type="button"
             onClick={() => setShowSchema(!showSchema)}
             className="text-[10px] text-text-link hover:underline"
           >
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx
index 613433756..f9bddbcca 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx
@@ -436,6 +436,7 @@ function Upgradable({
                             <span>
                               Save your changes or{" "}
                               <button
+                                type="button"
                                 className="inline text-indigo-500 hover:text-indigo-300"
                                 onClick={() => {
                                   setAllocation(initialAllocation(environments));
diff --git a/apps/webapp/app/routes/storybook.tsql-editor/route.tsx b/apps/webapp/app/routes/storybook.tsql-editor/route.tsx
index 543baa6ed..d68a4032b 100644
--- a/apps/webapp/app/routes/storybook.tsql-editor/route.tsx
+++ b/apps/webapp/app/routes/storybook.tsql-editor/route.tsx
@@ -164,6 +164,7 @@ export default function Story() {
         <div className="flex flex-wrap gap-2">
           {exampleQueries.map((example) => (
             <button
+              type="button"
               key={example.name}
               onClick={() => setQuery(example.query)}
               className="rounded bg-background-raised px-3 py-1.5 text-sm text-text-dimmed transition hover:bg-surface-control hover:text-text-bright"