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
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 b343c723a1b7..4f435cb06d56 100644 --- a/static/app/components/core/form/scrapsForm.tsx +++ b/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,6 +79,7 @@ const {useAppForm, withFieldGroup, withForm} = createFormHook({ function SubmitButton(props: ButtonProps) { const form = useFormContext(); + const isInsideForm = useIsInsideFormElement(); return ( 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} + {children} ); }