* [useForm]: reset serverValidationState by valid form save action

epam · Jan 13, 2025 · aac58ef · aac58ef
1 parent a2cd338
commit aac58ef
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/app/src/docs/_examples/form/ServerValidation.example.tsx b/app/src/docs/_examples/form/ServerValidation.example.tsx
@@ -50,7 +50,7 @@ export default function ServerValidationExample() {
                 <SuccessNotification { ...props }>
                     <Text>Form saved</Text>
                 </SuccessNotification>
-            )),
+            )).catch(() => {}),
         getMetadata: () => ({
             props: {
                 email: { isRequired: true },

diff --git a/changelog.md b/changelog.md
@@ -1,8 +1,12 @@
-# 5.12.2 - xx.xx.2024
+# 5.xx.xx - xx.xx.2024
 **What's New**
 * [MainMenuAvatar]: added `RawProps` prop
 
 
+**What's Fixed**
+* [useForm]: reset serverValidationState by valid form save action
+
+
 # 5.12.1 - 17.12.2024
 **What's Fixed**
 * Revert '[Svg]: don't set fill attribute if it's not provided' change from 5.12.0 version. Because it turned out that many users relied on the previous behavior where the fill attribute was cleared by default. If you need to render icon with built-in fill, please look at this issue comment - https://github.com/epam/UUI/issues/2684#issuecomment-2548751434

diff --git a/uui-core/src/data/forms/__tests__/useForm.test.tsx b/uui-core/src/data/forms/__tests__/useForm.test.tsx
@@ -765,7 +765,7 @@ describe('useForm', () => {
             expect(result.current.isChanged).toEqual(true);
         });
 
-        it('Should keep server error notification until field is changed', async () => {
+        it('Should keep server error notification until field is changed and reset it by save', async () => {
             const serverResponse: FormSaveResponse<IAdvancedFoo> = {
                 validation: {
                     isInvalid: true,
@@ -808,6 +808,11 @@ describe('useForm', () => {
             act(() => result.current.lens.prop('deep').prop('inner').set('correct'));
             expect(result.current.lens.prop('deep').prop('inner').toProps().isInvalid).toBe(false);
             expect(result.current.lens.prop('deep').prop('inner').toProps().validationProps).toBeUndefined();
+
+            await act(async () => handleSave(result.current.save));
+
+            expect(result.current.lens.prop('deep').prop('inner').toProps().isInvalid).toBe(false);
+            expect(result.current.serverValidationState).toBe(undefined);
         });
 
         it('Should keep only validationProps tree with validationMessage in the end', async () => {

diff --git a/uui-core/src/data/forms/useForm.ts b/uui-core/src/data/forms/useForm.ts
@@ -71,6 +71,7 @@ export function useForm<T>(props: UseFormProps<T>): IFormApi<T> {
             newState = updateValidationStates(newState);
             if (!newState.validationState.isInvalid) {
                 newState.isInProgress = true;
+                newState.serverValidationState = undefined; // reset serverValidationState if valid form is saving
                 savePromise = propsRef.current
                     .onSave(formState.current.form)
                     .then((response) =>