diff --git a/webapp/src/components/App/Singlestudy/HomeView/InformationView/CreateVariantDialog.tsx b/webapp/src/components/App/Singlestudy/HomeView/InformationView/CreateVariantDialog.tsx index 9d46ac4550..7c23b14a4f 100644 --- a/webapp/src/components/App/Singlestudy/HomeView/InformationView/CreateVariantDialog.tsx +++ b/webapp/src/components/App/Singlestudy/HomeView/InformationView/CreateVariantDialog.tsx @@ -58,7 +58,7 @@ function CreateVariantDialog(props: Props) { return ( {({ control }) => ( -
+
({ label: ver.name, value: ver.id, }))} - name="sourceId" control={control} - required + rules={{ required: true }} />
)} diff --git a/webapp/src/components/common/Fieldset.tsx b/webapp/src/components/common/Fieldset.tsx index cd72fa8943..442e4078b6 100644 --- a/webapp/src/components/common/Fieldset.tsx +++ b/webapp/src/components/common/Fieldset.tsx @@ -40,6 +40,10 @@ function Fieldset(props: FieldsetProps) { m: 0, }, }, + // Remove padding from the last child of the dialog content + ".MuiDialogContent-root .Form__Content > &:last-child": { + pb: 0, + }, }, sx, )} @@ -59,7 +63,7 @@ function Fieldset(props: FieldsetProps) { )} - + {children} diff --git a/webapp/src/components/common/Form/index.tsx b/webapp/src/components/common/Form/index.tsx index 7c4958bb7f..c14bc783be 100644 --- a/webapp/src/components/common/Form/index.tsx +++ b/webapp/src/components/common/Form/index.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { FormEvent, useEffect, useMemo, useRef } from "react"; +import { FormEvent, useEffect, useMemo, useRef, useState } from "react"; import { DeepPartial, FieldPath, @@ -116,6 +116,7 @@ function Form( const { t } = useTranslation(); const autoSubmitConfig = toAutoSubmitConfig(autoSubmit); + const [isInProgress, setIsInProgress] = useState(false); const [showAutoSubmitLoader, setShowAutoSubmitLoader] = useDebouncedState( false, 750, @@ -130,7 +131,6 @@ function Form( const lastSubmittedData = useRef(); // eslint-disable-next-line @typescript-eslint/no-empty-function const submitSuccessfulCb = useRef(() => {}); - const preventClose = useRef(false); const contextValue = useMemo( () => ({ isAutoSubmitEnabled: autoSubmitConfig.enable }), @@ -224,7 +224,7 @@ function Form( // Prevent browser close if a submit is pending useEffect(() => { const listener = (event: BeforeUnloadEvent) => { - if (preventClose.current) { + if (isInProgress) { // eslint-disable-next-line no-param-reassign event.returnValue = t("form.submit.inProgress"); } else if (isDirty) { @@ -238,14 +238,14 @@ function Form( return () => { window.removeEventListener("beforeunload", listener); }; - }, [t, isDirty]); + }, [t, isInProgress, isDirty]); useUpdateEffect(() => onStateChange?.(formState), [formState]); useEffect(() => setRef(apiRef, formApiPlus)); - usePrompt(t("form.submit.inProgress"), preventClose.current); - usePrompt(t("form.changeNotSaved"), isDirty); + usePrompt(t("form.submit.inProgress"), isInProgress); + usePrompt(t("form.changeNotSaved"), isDirty && !isInProgress); //////////////////////////////////////////////////////////////// // Submit @@ -299,7 +299,7 @@ function Form( }); }) .finally(() => { - preventClose.current = false; + setIsInProgress(false); }); }, onInvalid); @@ -309,7 +309,8 @@ function Form( const submitDebounced = useDebounce(submit, autoSubmitConfig.wait); const requestSubmit = () => { - preventClose.current = true; + setIsInProgress(true); + if (autoSubmitConfig.enable) { submitDebounced(); } else {