fix: The form item margin should appear below extraDom. (#51254)

Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -15699,7 +15699,8 @@ exports[`ConfigProvider components Form configProvider 1`] = `
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="config-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
@@ -15712,9 +15713,6 @@ exports[`ConfigProvider components Form configProvider 1`] = `
               Bamboo is Light
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -15754,7 +15752,8 @@ exports[`ConfigProvider components Form configProvider componentDisabled 1`] = `
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="config-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
@@ -15767,9 +15766,6 @@ exports[`ConfigProvider components Form configProvider componentDisabled 1`] = `
               Bamboo is Light
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -15808,7 +15804,8 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] =
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="config-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
@@ -15821,9 +15818,6 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] =
               Bamboo is Light
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -15862,7 +15856,8 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`]
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="config-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
@@ -15875,9 +15870,6 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`]
               Bamboo is Light
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -15916,7 +15908,8 @@ exports[`ConfigProvider components Form configProvider componentSize small 1`] =
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="config-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="config-form-item-explain config-form-show-help-appear config-form-show-help-appear-start config-form-show-help config-form-item-explain-connected"
@@ -15929,9 +15922,6 @@ exports[`ConfigProvider components Form configProvider componentSize small 1`] =
               Bamboo is Light
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -15970,7 +15960,8 @@ exports[`ConfigProvider components Form normal 1`] = `
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -15983,9 +15974,6 @@ exports[`ConfigProvider components Form normal 1`] = `
               Bamboo is Light
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -16024,7 +16012,8 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="prefix-Form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="prefix-Form-item-explain prefix-Form-show-help-appear prefix-Form-show-help-appear-start prefix-Form-show-help prefix-Form-item-explain-connected"
@@ -16037,9 +16026,6 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
               Bamboo is Light
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>

components/form/FormItemInput.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 
 import type { ColProps } from '../grid/col';
 import Col from '../grid/col';
@@ -65,6 +66,16 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
   delete subFormContext.labelCol;
   delete subFormContext.wrapperCol;
 
+  const extraRef = React.useRef<HTMLDivElement>(null);
+  const [extraHeight, setExtraHeight] = React.useState<number>(0);
+  useLayoutEffect(() => {
+    if (extra && extraRef.current) {
+      setExtraHeight(extraRef.current.clientHeight);
+    } else {
+      setExtraHeight(0);
+    }
+  }, [extra]);
+
   const inputDom: React.ReactNode = (
     <div className={`${baseClassName}-control-input`}>
       <div className={`${baseClassName}-control-input-content`}>{children}</div>
@@ -73,7 +84,6 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
   const formItemContext = React.useMemo(() => ({ prefixCls, status }), [prefixCls, status]);
   const errorListDom: React.ReactNode =
     marginBottom !== null || errors.length || warnings.length ? (
-      <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
       <FormItemPrefixContext.Provider value={formItemContext}>
         <ErrorList
           fieldId={fieldId}
@@ -85,8 +95,6 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
           onVisibleChanged={onErrorVisibleChanged}
         />
       </FormItemPrefixContext.Provider>
-        {!!marginBottom && <div style={{ width: 0, height: marginBottom }} />}
-      </div>
     ) : null;
 
   const extraProps: { id?: string } = {};
@@ -98,19 +106,29 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
   // If extra = 0, && will goes wrong
   // 0&&error -> 0
   const extraDom: React.ReactNode = extra ? (
-    <div {...extraProps} className={`${baseClassName}-extra`}>
+    <div {...extraProps} className={`${baseClassName}-extra`} ref={extraRef}>
       {extra}
     </div>
   ) : null;
 
+  const additionalDom: React.ReactNode =
+    errorListDom || extraDom ? (
+      <div
+        className={`${baseClassName}-additional`}
+        style={marginBottom ? { minHeight: marginBottom + extraHeight } : {}}
+      >
+        {errorListDom}
+        {extraDom}
+      </div>
+    ) : null;
+
   const dom: React.ReactNode =
     formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? (
       formItemRender.render(props, { input: inputDom, errorList: errorListDom, extra: extraDom })
     ) : (
       <>
         {inputDom}
-        {errorListDom}
+        {additionalDom}
-        {extraDom}
       </>
     );
   return (

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -2010,7 +2010,8 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -2022,9 +2023,6 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
               style="height: 0px; opacity: 0;"
             />
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -2076,7 +2074,8 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -2088,9 +2087,6 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
               style="height: 0px; opacity: 0;"
             />
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -6102,7 +6098,8 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -6115,9 +6112,6 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
               Buggy!
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -6161,7 +6155,8 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -6174,9 +6169,6 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
               Buggy!
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -6255,7 +6247,8 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -6268,9 +6261,6 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
               Buggy!
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -6314,7 +6304,8 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -6327,9 +6318,6 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
               Buggy!
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -6434,7 +6422,8 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -6447,9 +6436,6 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
               Buggy!
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -6506,7 +6492,8 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -6519,9 +6506,6 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
               Buggy!
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -6618,7 +6602,8 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -6631,9 +6616,6 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
               Buggy!
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -6686,7 +6668,8 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -6699,9 +6682,6 @@ exports[`renders components/form/demo/disabled-input-debug.tsx extend context co
               Buggy!
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -11246,6 +11226,9 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
             </div>
           </div>
         </div>
+        <div
+          class="ant-form-item-additional"
+        >
           <div
             class="ant-form-item-extra"
           >
@@ -11254,6 +11237,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-form-item"
   >
@@ -22982,6 +22966,9 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
             </span>
           </div>
         </div>
+        <div
+          class="ant-form-item-additional"
+        >
           <div
             class="ant-form-item-extra"
             id="validate_other_upload_extra"
@@ -22991,6 +22978,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-form-item"
   >
@@ -23965,7 +23953,8 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -23978,9 +23967,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               Should be combination of numbers & alphabets
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -24119,7 +24105,8 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -24132,9 +24119,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               The information is being validated...
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -24346,7 +24330,8 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -24359,9 +24344,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               Should be combination of numbers & alphabets
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -28257,7 +28239,8 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -28270,9 +28253,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               Something breaks the rule.
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -28470,7 +28450,8 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -28483,9 +28464,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               Need to be checked
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -29152,7 +29130,8 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                     </div>
                   </div>
                   <div
-                    style="display: flex; flex-wrap: nowrap;"
+                    class="ant-form-item-additional"
+                    style="min-height: 24px;"
                   >
                     <div
                       class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -29165,9 +29144,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                         Please select right date
                       </div>
                     </div>
-                    <div
-                      style="width: 0px; height: 24px;"
-                    />
                   </div>
                 </div>
               </div>
@@ -30634,7 +30610,8 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -30647,9 +30624,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               Should have something
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>
@@ -33736,7 +33710,8 @@ exports[`renders components/form/demo/without-form-create.tsx extend context cor
           </div>
         </div>
         <div
-          style="display: flex; flex-wrap: nowrap;"
+          class="ant-form-item-additional"
+          style="min-height: 24px;"
         >
           <div
             class="ant-form-item-explain ant-form-show-help-appear ant-form-show-help-appear-start ant-form-show-help ant-form-item-explain-connected"
@@ -33749,9 +33724,6 @@ exports[`renders components/form/demo/without-form-create.tsx extend context cor
               A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.
             </div>
           </div>
-          <div
-            style="width: 0px; height: 24px;"
-          />
         </div>
       </div>
     </div>

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -7182,6 +7182,9 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="ant-form-item-additional"
+        >
           <div
             class="ant-form-item-extra"
           >
@@ -7190,6 +7193,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-form-item"
   >
@@ -10382,6 +10386,9 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
             </span>
           </div>
         </div>
+        <div
+          class="ant-form-item-additional"
+        >
           <div
             class="ant-form-item-extra"
             id="validate_other_upload_extra"
@@ -10391,6 +10398,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-form-item"
   >

components/form/style/explain.ts

@@ -10,7 +10,7 @@ const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
   return {
     [helpCls]: {
       // Explain holder
-      transition: `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+      transition: `opacity ${token.motionDurationFast} ${token.motionEaseInOut}`,
 
       '&-appear, &-enter': {
         opacity: 0,
@@ -31,9 +31,9 @@ const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
       // Explain
       [helpItemCls]: {
         overflow: 'hidden',
-        transition: `height ${token.motionDurationSlow} ${token.motionEaseInOut},
+        transition: `height ${token.motionDurationFast} ${token.motionEaseInOut},
-                     opacity ${token.motionDurationSlow} ${token.motionEaseInOut},
+                     opacity ${token.motionDurationFast} ${token.motionEaseInOut},
-                     transform ${token.motionDurationSlow} ${token.motionEaseInOut} !important`,
+                     transform ${token.motionDurationFast} ${token.motionEaseInOut} !important`,
 
         [`&${helpItemCls}-appear, &${helpItemCls}-enter`]: {
           transform: `translateY(-5px)`,

components/form/style/index.ts

@@ -8,8 +8,8 @@ import type {
   AliasToken,
   FullToken,
   GenerateStyle,
-  GetDefaultToken,
   GenStyleFn,
+  GetDefaultToken,
 } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genFormValidateMotionStyle from './explain';
@@ -339,6 +339,11 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                           Explain                          =
       // ==============================================================
       [formItemCls]: {
+        '&-additional': {
+          display: 'flex',
+          flexDirection: 'column',
+        },
+
         '&-explain, &-extra': {
           clear: 'both',
           color: token.colorTextDescription,