fix(scraps): skip redundant form attribute on SubmitButton

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,
+};

static/app/components/core/form/scrapsForm.tsx

@@ -24,7 +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';
+import {
+  FormElementContext,
+  fieldContext,
+  formContext,
+  useFormContext,
+  useIsInsideFormElement,
+} from './formContext';
 
 export const defaultFormOptions = formOptions({
   onSubmitInvalid({formApi}: {formApi: {formId: string}}) {
@@ -73,14 +79,15 @@ const {useAppForm, withFieldGroup, withForm} = createFormHook({
 
 function SubmitButton(props: ButtonProps) {
   const form = useFormContext();
+  const isInsideForm = useIsInsideFormElement();
   return (
     <form.Subscribe selector={state => state.isSubmitting}>
       {isSubmitting => (
         <Button
           {...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}
+      <FormElementContext.Provider value>{children}</FormElementContext.Provider>
     </form>
   );
 }