fix(ui-commons): prompt form Form displayed on dialog validation #2089
Conversation
skamril
force-pushed
the
bugfix/ANT-1888_create_variant_dialog
branch
from
31f8bb7
to
909a55a
Compare
skamril
changed the title
| @@ -58,7 +58,7 @@ function CreateVariantDialog(props: Props) { | |||
|
|
|||
| return ( | |||
| <FormDialog | |||
| maxWidth="sm" | |||
| maxWidth="xs" | |||
There was a problem hiding this comment.
please revert that change, studies names can be quite long so xs width is too small in most cases. And their is no width constraints when opening the dialog
| @@ -116,6 +116,7 @@ function Form<TFieldValues extends FieldValues, TContext>( | |||
| const { t } = useTranslation(); | |||
| const autoSubmitConfig = toAutoSubmitConfig(autoSubmit); | |||
|
|
|||
| const [isInProgress, setIsInProgress] = useState(false); | |||
There was a problem hiding this comment.
consider this instead:
const [isSubmitting, setIsSubmitting] = useState(false);There was a problem hiding this comment.
isSubmitting already exist...
There was a problem hiding this comment.
In the same component? Ok mybad didnt see that
There was a problem hiding this comment.
maybe you can just add the 'submit' to indicate it refers to a submitting state like isSubmitInProgress (it's a detail tho feel free to skip)
skamril
force-pushed
the
bugfix/ANT-1888_create_variant_dialog
branch
from
909a55a
to
5b46996
Compare
| @@ -224,7 +224,7 @@ function Form<TFieldValues extends FieldValues, TContext>( | |||
| // Prevent browser close if a submit is pending | |||
| useEffect(() => { | |||
| const listener = (event: BeforeUnloadEvent) => { | |||
| if (preventClose.current) { | |||
| if (isInProgress) { | |||
| usePrompt(t("form.submit.inProgress"), isInProgress); | ||
| usePrompt(t("form.changeNotSaved"), isDirty && !isInProgress); |
There was a problem hiding this comment.
optional: maybe you can wrap those in a useEffect, use strict conditions, and add a cleanup for the prompt
(this can potentially lead to overlapping or competing prompts)
useEffect(() => {
if (isSubmitting) {
usePrompt(t("form.submit.inProgress"), true);
} else if (isDirty) {
usePrompt(t("form.changeNotSaved"), true);
} else {
usePrompt(null, false); // Clear the prompt when no conditions are met
}
// Cleanup function to clear the prompt when the component unmounts
return () => usePrompt(null, false);
}, [isSubmitting, isDirty, t]);| @@ -116,6 +116,7 @@ function Form<TFieldValues extends FieldValues, TContext>( | |||
| const { t } = useTranslation(); | |||
| const autoSubmitConfig = toAutoSubmitConfig(autoSubmit); | |||
|
|
|||
| const [isInProgress, setIsInProgress] = useState(false); | |||
There was a problem hiding this comment.
In the same component? Ok mybad didnt see that
| @@ -116,6 +116,7 @@ function Form<TFieldValues extends FieldValues, TContext>( | |||
| const { t } = useTranslation(); | |||
| const autoSubmitConfig = toAutoSubmitConfig(autoSubmit); | |||
|
|
|||
| const [isInProgress, setIsInProgress] = useState(false); | |||
There was a problem hiding this comment.
maybe you can just add the 'submit' to indicate it refers to a submitting state like isSubmitInProgress (it's a detail tho feel free to skip)
ANT-1858