fix: fix incorrect form status with noStyle (ant-design#36054)

* fix: form status * test: update test case
denghuacc · Jun 23, 2022 · 2b4ed4c · 2b4ed4c
1 parent 42afde3
commit 2b4ed4c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 45 deletions.
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
@@ -217,14 +217,9 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
   const getItemRef = useItemRef();
 
   // ======================== Status ========================
-  const { status: contextStatus, hasFeedback: contextHasFeedback } =
-    useContext(FormItemInputContext);
-
-  let mergedValidateStatus: ValidateStatus | undefined;
+  let mergedValidateStatus: ValidateStatus = '';
   if (validateStatus !== undefined) {
     mergedValidateStatus = validateStatus;
-  } else if (contextStatus !== undefined) {
-    mergedValidateStatus = contextStatus;
   } else if (meta?.validating) {
     mergedValidateStatus = 'validating';
   } else if (debounceErrors.length) {
@@ -235,11 +230,9 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
     mergedValidateStatus = 'success';
   }
 
-  const mergedHasFeedback = hasFeedback || contextHasFeedback;
-
   const formItemStatusContext = useMemo<FormItemStatusContextProps>(() => {
     let feedbackIcon: ReactNode;
-    if (mergedHasFeedback) {
+    if (hasFeedback) {
       const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
       feedbackIcon = IconNode ? (
         <span
@@ -255,19 +248,11 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
 
     return {
       status: mergedValidateStatus,
-      hasFeedback: mergedHasFeedback,
+      hasFeedback,
       feedbackIcon,
       isFormItemInput: true,
     };
-  }, [mergedValidateStatus, mergedHasFeedback]);
-
-  const noOverrideFormItemContext = useMemo<FormItemStatusContextProps>(
-    () => ({
-      ...formItemStatusContext,
-      isFormItemInput: false,
-    }),
-    [formItemStatusContext],
-  );
+  }, [mergedValidateStatus, hasFeedback]);
 
   // ======================== Render ========================
   function renderLayout(
@@ -276,11 +261,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
     isRequired?: boolean,
   ): React.ReactNode {
     if (noStyle && !hidden) {
-      return (
-        <FormItemInputContext.Provider value={noOverrideFormItemContext}>
-          {baseChildren}
-        </FormItemInputContext.Provider>
-      );
+      return baseChildren;
     }
 
     const itemClassName = {
@@ -290,7 +271,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
       [`${className}`]: !!className,
 
       // Status
-      [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && mergedHasFeedback,
+      [`${prefixCls}-item-has-feedback`]: mergedValidateStatus && hasFeedback,
       [`${prefixCls}-item-has-success`]: mergedValidateStatus === 'success',
       [`${prefixCls}-item-has-warning`]: mergedValidateStatus === 'warning',
       [`${prefixCls}-item-has-error`]: mergedValidateStatus === 'error',

diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -6836,7 +6836,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox ant-checkbox-checked"
@@ -18031,7 +18031,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"

diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -4451,7 +4451,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <label
-            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
           >
             <span
               class="ant-checkbox ant-checkbox-checked"
@@ -7257,7 +7257,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-number"
+            class="ant-input-number ant-input-number-in-form-item"
           >
             <div
               class="ant-input-number-handler-wrap"

diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
@@ -1207,20 +1207,6 @@ describe('Form', () => {
     expect(subFormInstance).toBe(formInstance);
   });
 
-  it('noStyle should not be affected by parent', () => {
-    const Demo = () => (
-      <Form>
-        <Form.Item>
-          <Form.Item noStyle>
-            <Select className="custom-select" />
-          </Form.Item>
-        </Form.Item>
-      </Form>
-    );
-    const { container } = render(<Demo />);
-    expect(container.querySelector('.custom-select')?.className).not.toContain('in-form-item');
-  });
-
   it('noStyle should not affect status', () => {
     const Demo = () => (
       <Form>
@@ -1237,12 +1223,22 @@ describe('Form', () => {
             <Select className="custom-select-c" />
           </Form.Item>
         </Form.Item>
+        <Form.Item noStyle>
+          <Form.Item validateStatus="warning">
+            <Select className="custom-select-d" />
+          </Form.Item>
+        </Form.Item>
       </Form>
     );
     const { container } = render(<Demo />);
-    expect(container.querySelector('.custom-select')?.className).toContain('status-error');
+    expect(container.querySelector('.custom-select')?.className).not.toContain('status-error');
+    expect(container.querySelector('.custom-select')?.className).not.toContain('in-form-item');
     expect(container.querySelector('.custom-select-b')?.className).toContain('status-error');
-    expect(container.querySelector('.custom-select-c')?.className).toContain('status-warning');
+    expect(container.querySelector('.custom-select-b')?.className).toContain('in-form-item');
+    expect(container.querySelector('.custom-select-c')?.className).toContain('status-error');
+    expect(container.querySelector('.custom-select-c')?.className).toContain('in-form-item');
+    expect(container.querySelector('.custom-select-d')?.className).toContain('status-warning');
+    expect(container.querySelector('.custom-select-d')?.className).toContain('in-form-item');
   });
 
   it('should not affect Popup children style', () => {