From 440f2a0701a1be3aa811933e86eb537ac9e1db1b Mon Sep 17 00:00:00 2001
From: Nate Moore <nate.moore@sentry.io>
Date: Tue, 7 Jul 2026 13:58:34 -0400
Subject: [PATCH 1/2] fix(scraps): skip redundant form attribute on
 SubmitButton in Safari

---
 static/app/components/core/form/scrapsForm.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/static/app/components/core/form/scrapsForm.tsx b/static/app/components/core/form/scrapsForm.tsx
index b343c723a1b7..9e3ec510e4f0 100644
--- a/static/app/components/core/form/scrapsForm.tsx
+++ b/static/app/components/core/form/scrapsForm.tsx
@@ -1,3 +1,4 @@
+import {createContext, useContext} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {
   createFormHook,
@@ -26,6 +27,11 @@ import {SwitchField} from './field/switchField';
 import {TextAreaField} from './field/textAreaField';
 import {fieldContext, formContext, useFormContext} from './formContext';
 
+// Safari doesn't submit a form when the button has an explicit `form` attribute
+// pointing at its own parent form. Only set the attribute when the button is
+// rendered outside the <form> element.
+const InsideFormElement = createContext(false);
+
 export const defaultFormOptions = formOptions({
   onSubmitInvalid({formApi}: {formApi: {formId: string}}) {
     // https://github.com/typescript-eslint/typescript-eslint/issues/10722
@@ -73,6 +79,7 @@ const {useAppForm, withFieldGroup, withForm} = createFormHook({
 
 function SubmitButton(props: ButtonProps) {
   const form = useFormContext();
+  const isInsideForm = useContext(InsideFormElement);
   return (
     <form.Subscribe selector={state => state.isSubmitting}>
       {isSubmitting => (
@@ -80,7 +87,7 @@ function SubmitButton(props: ButtonProps) {
           {...props}
           variant="primary"
           type="submit"
-          form={form.formId}
+          form={isInsideForm ? undefined : form.formId}
           busy={isSubmitting || props.busy}
           disabled={isSubmitting || props.disabled}
         />
@@ -129,7 +136,7 @@ function FormWrapper({children}: {children: React.ReactNode}) {
         form.handleSubmit();
       }}
     >
-      {children}
+      <InsideFormElement.Provider value>{children}</InsideFormElement.Provider>
     </form>
   );
 }

From 592f2c5d8ae7380ef815b1349a87bcc8daaea05f Mon Sep 17 00:00:00 2001
From: Nate Moore <nate.moore@sentry.io>
Date: Tue, 7 Jul 2026 14:22:07 -0400
Subject: [PATCH 2/2] ref(scraps): move FormElementContext to formContext
 module

---
 static/app/components/core/form/formContext.ts | 16 +++++++++++++++-
 static/app/components/core/form/scrapsForm.tsx | 18 +++++++++---------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/static/app/components/core/form/formContext.ts b/static/app/components/core/form/formContext.ts
index 227bb1b2de4f..984dbdae33ef 100644
--- a/static/app/components/core/form/formContext.ts
+++ b/static/app/components/core/form/formContext.ts
@@ -1,7 +1,21 @@
+import {createContext, useContext} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {createFormHookContexts} from '@tanstack/react-form';
 
 const {fieldContext, formContext, useFormContext, useFieldContext} =
   createFormHookContexts();
 
-export {fieldContext, formContext, useFormContext, useFieldContext};
+// Safari doesn't submit a form when the button has an explicit `form` attribute
+// pointing at its own parent form. Only set the attribute when the button is
+// rendered outside the <form> element.
+const FormElementContext = createContext(false);
+const useIsInsideFormElement = () => useContext(FormElementContext);
+
+export {
+  fieldContext,
+  formContext,
+  useFormContext,
+  useFieldContext,
+  FormElementContext,
+  useIsInsideFormElement,
+};
diff --git a/static/app/components/core/form/scrapsForm.tsx b/static/app/components/core/form/scrapsForm.tsx
index 9e3ec510e4f0..4f435cb06d56 100644
--- a/static/app/components/core/form/scrapsForm.tsx
+++ b/static/app/components/core/form/scrapsForm.tsx
@@ -1,4 +1,3 @@
-import {createContext, useContext} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {
   createFormHook,
@@ -25,12 +24,13 @@ import {SelectAsyncField} from './field/selectAsyncField';
 import {SelectField} from './field/selectField';
 import {SwitchField} from './field/switchField';
 import {TextAreaField} from './field/textAreaField';
-import {fieldContext, formContext, useFormContext} from './formContext';
-
-// Safari doesn't submit a form when the button has an explicit `form` attribute
-// pointing at its own parent form. Only set the attribute when the button is
-// rendered outside the <form> element.
-const InsideFormElement = createContext(false);
+import {
+  FormElementContext,
+  fieldContext,
+  formContext,
+  useFormContext,
+  useIsInsideFormElement,
+} from './formContext';
 
 export const defaultFormOptions = formOptions({
   onSubmitInvalid({formApi}: {formApi: {formId: string}}) {
@@ -79,7 +79,7 @@ const {useAppForm, withFieldGroup, withForm} = createFormHook({
 
 function SubmitButton(props: ButtonProps) {
   const form = useFormContext();
-  const isInsideForm = useContext(InsideFormElement);
+  const isInsideForm = useIsInsideFormElement();
   return (
     <form.Subscribe selector={state => state.isSubmitting}>
       {isSubmitting => (
@@ -136,7 +136,7 @@ function FormWrapper({children}: {children: React.ReactNode}) {
         form.handleSubmit();
       }}
     >
-      <InsideFormElement.Provider value>{children}</InsideFormElement.Provider>
+      <FormElementContext.Provider value>{children}</FormElementContext.Provider>
     </form>
   );
 }