fix(Form): form buttons handle isDisable properly * 3

Author: tenphi

src/components/form/Form/ResetButton/ResetButton.tsx

@@ -26,7 +26,10 @@ function ResetButton(
   const { form, isDisabled, ...otherProps } = props;
 
   const onPress = useEvent(() => {
-    form?.resetFields();
+    // Use setTimeout to avoid conflict with onBlur handlers
+    setTimeout(() => {
+      form?.resetFields();
+    });
   });
 
   const isSomethingDisabled = isDisabled || isContextDisabled;
@@ -40,10 +43,9 @@ function ResetButton(
       {...mergeProps(
         {
           onPress,
-          isDisabled:
-            isSomethingDisabled != null
-              ? isSomethingDisabled
-              : form?.isSubmitting || !form?.isTouched,
+          isDisabled: isSomethingDisabled
+            ? true
+            : form?.isSubmitting || !form?.isTouched,
         },
         otherProps,
       )}

src/components/form/Form/SubmitButton/SubmitButton.tsx

@@ -33,9 +33,7 @@ function SubmitButton(
       type="primary"
       htmlType="submit"
       isLoading={form?.isSubmitting}
-      isDisabled={
-        isSomethingDisabled != null ? isSomethingDisabled : form?.isInvalid
-      }
+      isDisabled={isSomethingDisabled ? true : form?.isInvalid}
       {...otherProps}
     />
   );

src/components/form/Form/submit.test.tsx

@@ -2,7 +2,7 @@ import userEvents from '@testing-library/user-event';
 import { act, waitFor } from '@testing-library/react';
 
 import { renderWithForm } from '../../../test/index';
-import { SubmitButton } from '../../form';
+import { ResetButton, SubmitButton } from '../../form';
 import { TextInput } from '../../fields';
 
 import { Form } from './index';
@@ -90,4 +90,164 @@ describe('<Form />', () => {
       expect(getByText('Internal error')).toBeInTheDocument();
     });
   });
+
+  it('should handle reset button behavior correctly', async () => {
+    const onSubmit = jest.fn((data) => {});
+
+    const { getByRole, getByText } = renderWithForm(
+      <>
+        <Form.Item
+          name="test"
+          label="Test"
+          rules={[
+            {
+              async validator(rule, value) {
+                return value ? Promise.resolve() : Promise.reject('Required');
+              },
+            },
+          ]}
+        >
+          <TextInput />
+        </Form.Item>
+
+        <SubmitButton>Submit</SubmitButton>
+        <ResetButton>Reset</ResetButton>
+        <Form.SubmitError />
+      </>,
+      { formProps: { onSubmit } },
+    );
+
+    const input = getByRole('textbox');
+    const submitButton = getByRole('button', { name: 'Submit' });
+    const resetButton = getByRole('button', { name: 'Reset' });
+
+    // Check initial button states
+    expect(submitButton).toBeEnabled();
+    expect(resetButton).toBeDisabled();
+
+    // Click submit button and verify state
+    await userEvents.click(submitButton);
+
+    await waitFor(() => {
+      expect(getByText('Required')).toBeInTheDocument();
+    });
+
+    expect(submitButton).toBeDisabled();
+    expect(resetButton).toBeDisabled();
+
+    // Type into input and verify reset button becomes active
+    await act(async () => {
+      await userEvents.type(input, 'test');
+    });
+
+    expect(resetButton).toBeEnabled();
+    expect(submitButton).toBeEnabled();
+
+    // Click reset button and verify states
+    await userEvents.click(resetButton);
+
+    await waitFor(() => {
+      expect(resetButton).toBeDisabled();
+    });
+
+    expect(input).toHaveValue('');
+    expect(submitButton).toBeEnabled();
+  });
+
+  it('should respect the isDisabled:true property for ResetButton and SubmitButton', async () => {
+    const onSubmit = jest.fn(() => Promise.resolve());
+    const onSubmitFailed = jest.fn(() => {});
+
+    const { getByRole } = renderWithForm(
+      <>
+        <Form.Item
+          name="test"
+          label="Test"
+          rules={[
+            {
+              validator(rule, value) {
+                return value ? Promise.resolve() : Promise.reject('Required');
+              },
+            },
+          ]}
+        >
+          <TextInput />
+        </Form.Item>
+
+        {/* Explicitly set isDisabled */}
+        <SubmitButton isDisabled={true}>Submit</SubmitButton>
+        <ResetButton isDisabled={true}>Reset</ResetButton>
+      </>,
+      { formProps: { onSubmit, onSubmitFailed } },
+    );
+
+    const input = getByRole('textbox');
+    const submitButton = getByRole('button', { name: 'Submit' });
+    const resetButton = getByRole('button', { name: 'Reset' });
+
+    // Check that both buttons are disabled because isDisabled is true
+    expect(submitButton).toBeDisabled();
+    expect(resetButton).toBeDisabled();
+
+    // Try typing in input
+    await act(async () => {
+      await userEvents.type(input, 'test');
+    });
+
+    // Buttons should still be disabled because of isDisabled
+    expect(submitButton).toBeDisabled();
+    expect(resetButton).toBeDisabled();
+  });
+
+  it('Respect isDisabled:false property for ResetButton and SubmitButton', async () => {
+    const onSubmit = jest.fn(() => Promise.resolve());
+    const onSubmitFailed = jest.fn(() => {});
+
+    // Render with isDisabled = false for buttons
+    const { getByRole: getByRoleNew } = renderWithForm(
+      <>
+        <Form.Item
+          name="test"
+          label="Test"
+          rules={[
+            {
+              validator(rule, value) {
+                return value ? Promise.resolve() : Promise.reject('Required');
+              },
+            },
+          ]}
+        >
+          <TextInput />
+        </Form.Item>
+
+        <SubmitButton isDisabled={false}>Submit</SubmitButton>
+        <ResetButton isDisabled={false}>Reset</ResetButton>
+      </>,
+      { formProps: { onSubmit, onSubmitFailed } },
+    );
+
+    const submitButton = getByRoleNew('button', { name: 'Submit' });
+    const resetButton = getByRoleNew('button', { name: 'Reset' });
+
+    // Verify default behavior without isDisabled=true
+    expect(submitButton).toBeEnabled();
+    expect(resetButton).toBeDisabled();
+
+    // Type in input and verify reset button becomes enabled
+    const inputNew = getByRoleNew('textbox');
+    await act(async () => {
+      await userEvents.type(inputNew, 'test');
+    });
+
+    expect(resetButton).toBeEnabled();
+
+    // Click reset button and verify behavior
+    await userEvents.click(resetButton);
+
+    await waitFor(() => {
+      expect(inputNew).toHaveValue('');
+      expect(submitButton).toBeEnabled();
+      expect(resetButton).toBeDisabled();
+    });
+  });
 });

src/components/form/Form/use-form.tsx

@@ -229,6 +229,13 @@ export class CubeFormInstance<
       field.touched = false;
       field.status = undefined;
       field.inputValue = defaultValue;
+
+      // reject all ongoing validations
+      if (!field.validationId) {
+        field.validationId = 1;
+      } else {
+        field.validationId++;
+      }
     });
 
     if (!skipRender) {
@@ -253,6 +260,7 @@ export class CubeFormInstance<
     }
 
     field.validating = true;
+    field.status = undefined;
 
     if (!field.validationId) {
       field.validationId = 1;

src/stories/Form.stories.jsx

@@ -1,4 +1,12 @@
-import { Form, Field, SubmitButton, Input } from '../index';
+import {
+  Form,
+  Field,
+  SubmitButton,
+  Input,
+  ResetButton,
+  Space,
+  TextInput,
+} from '../index';
 
 import { DialogFormApp } from './components/DialogFormApp';
 import { DISABLE_BASE_ARGS } from './FormFieldArgs';
@@ -56,13 +64,47 @@ export const LoginForm = {
       >
         <Input.Password type="password" />
       </Field>
-      <SubmitButton>Submit</SubmitButton>
+      <Space>
+        <SubmitButton>Submit</SubmitButton>
+        <ResetButton>Reset</ResetButton>
+      </Space>
     </Form>
   ),
 
   name: 'LoginForm',
 };
 
+export const SimpleValidation = {
+  render: (args) => (
+    <Form
+      onSubmit={(data) => {
+        console.log('! Submit', data);
+      }}
+      {...args}
+    >
+      <Form.Item
+        name="test"
+        label="Test"
+        rules={[
+          {
+            validator(rule, value) {
+              return value ? Promise.resolve() : Promise.reject('Required');
+            },
+          },
+        ]}
+      >
+        <TextInput />
+      </Form.Item>
+
+      <Space>
+        <SubmitButton>Submit</SubmitButton>
+        <ResetButton>Reset</ResetButton>
+      </Space>
+      <Form.SubmitError />
+    </Form>
+  ),
+};
+
 export const HorizontalLoginForm = {
   // 1s of submitting
   render: (args) => (