fix(experiment-form-ui): prevent event bubbling from embedded form submission handlers (#9215)

marliessophie · web-flow · commit ac2936d316cc · 2025-09-18T10:12:22.000Z
diff --git a/web/src/features/evals/components/inner-evaluator-form.tsx b/web/src/features/evals/components/inner-evaluator-form.tsx
@@ -1131,7 +1131,10 @@ export const InnerEvaluatorForm = (props: {
     <Form {...form}>
       <form
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        onSubmit={form.handleSubmit(onSubmit)}
+        onSubmit={(e) => {
+          e.stopPropagation(); // Prevent event bubbling to parent forms
+          form.handleSubmit(onSubmit)(e);
+        }}
         onKeyDown={(e) => {
           if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
             e.preventDefault();
diff --git a/web/src/features/public-api/components/CreateLLMApiKeyForm.tsx b/web/src/features/public-api/components/CreateLLMApiKeyForm.tsx
@@ -475,7 +475,10 @@ export function CreateLLMApiKeyForm({
     <Form {...form}>
       <form
         className={cn("flex flex-col gap-4 overflow-auto")}
-        onSubmit={form.handleSubmit(onSubmit)}
+        onSubmit={(e) => {
+          e.stopPropagation(); // Prevent event bubbling to parent forms
+          form.handleSubmit(onSubmit)(e);
+        }}
       >
         <DialogBody>
           {/* LLM adapter */}
