From 981886d746b380f05ce1a7b904e02c7a13630e15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Mon, 30 May 2022 15:15:14 +0800
Subject: [PATCH] fix(form): fix addonAfter  style error (#5312)

close #5309
---
 .../form/src/components/FormItem/index.tsx    |   4 +
 packages/form/src/demos/base.tsx              |   1 +
 tests/form/__snapshots__/demo.test.ts.snap    | 171 ++++++++++--------
 3 files changed, 98 insertions(+), 78 deletions(-)

diff --git a/packages/form/src/components/FormItem/index.tsx b/packages/form/src/components/FormItem/index.tsx
index 43f096e7abd5..487c1e8adcfc 100644
--- a/packages/form/src/components/FormItem/index.tsx
+++ b/packages/form/src/components/FormItem/index.tsx
@@ -157,6 +157,10 @@ const WarpFormItem: React.FC<FormItemProps & WarpFormItemProps> = ({
     }
     return (
       <Form.Item
+        style={{
+          width: 'max-content',
+          maxWidth: '100%',
+        }}
         // @ts-ignore
         _internalItemRender={{
           mark: 'pro_table_render',
diff --git a/packages/form/src/demos/base.tsx b/packages/form/src/demos/base.tsx
index e93ad0988744..e1f6da093980 100644
--- a/packages/form/src/demos/base.tsx
+++ b/packages/form/src/demos/base.tsx
@@ -198,6 +198,7 @@ export default () => {
         name="areaList"
         label="区域"
         initialValue={['zhejiang', 'hangzhou', 'xihu']}
+        addonAfter={'qixian'}
       />
       <ProFormTreeSelect
         initialValue={['0-0-0']}
diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
index d81826600bd4..fa4bfbcccfea 100644
--- a/tests/form/__snapshots__/demo.test.ts.snap
+++ b/tests/form/__snapshots__/demo.test.ts.snap
@@ -34379,6 +34379,7 @@ exports[`form demos 📸 renders ./packages/form/src/demos/base.tsx correctly 1`
         >
           <div
             class="ant-row ant-form-item"
+            style="max-width: 100%;"
           >
             <div
               class="ant-col ant-form-item-label"
@@ -35322,6 +35323,7 @@ exports[`form demos 📸 renders ./packages/form/src/demos/base.tsx correctly 1`
     </div>
     <div
       class="ant-row ant-form-item"
+      style="max-width: 100%;"
     >
       <div
         class="ant-col ant-form-item-label"
@@ -35338,98 +35340,111 @@ exports[`form demos 📸 renders ./packages/form/src/demos/base.tsx correctly 1`
         class="ant-col ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input"
+          style="display: flex; align-items: center;"
         >
           <div
-            class="ant-form-item-control-input-content"
+            style="flex: 1;"
           >
             <div
-              class="ant-select ant-cascader ant-select-in-form-item pro-field pro-field-md ant-pro-field-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+              class="ant-form-item-control-input"
             >
               <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="areaList_list"
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-owns="areaList_list"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    id="areaList"
-                    readonly=""
-                    role="combobox"
-                    style="opacity: 0;"
-                    type="search"
-                    unselectable="on"
-                    value=""
-                  />
-                </span>
-                <span
-                  class="ant-select-selection-item"
-                  title="浙江 / 杭州 / 西湖"
-                >
-                  浙江 / 杭州 / 西湖
-                </span>
-              </div>
-              <span
-                aria-hidden="true"
-                class="ant-select-arrow"
-                style="user-select: none;"
-                unselectable="on"
+                class="ant-form-item-control-input-content"
               >
-                <span
-                  aria-label="down"
-                  class="anticon anticon-down ant-select-suffix"
-                  role="img"
+                <div
+                  class="ant-select ant-cascader ant-select-in-form-item pro-field pro-field-md ant-pro-field-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
                 >
-                  <svg
+                  <div
+                    class="ant-select-selector"
+                  >
+                    <span
+                      class="ant-select-selection-search"
+                    >
+                      <input
+                        aria-autocomplete="list"
+                        aria-controls="areaList_list"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        aria-owns="areaList_list"
+                        autocomplete="off"
+                        class="ant-select-selection-search-input"
+                        id="areaList"
+                        readonly=""
+                        role="combobox"
+                        style="opacity: 0;"
+                        type="search"
+                        unselectable="on"
+                        value=""
+                      />
+                    </span>
+                    <span
+                      class="ant-select-selection-item"
+                      title="浙江 / 杭州 / 西湖"
+                    >
+                      浙江 / 杭州 / 西湖
+                    </span>
+                  </div>
+                  <span
                     aria-hidden="true"
-                    data-icon="down"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                    class="ant-select-arrow"
+                    style="user-select: none;"
+                    unselectable="on"
                   >
-                    <path
-                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                aria-hidden="true"
-                class="ant-select-clear"
-                style="user-select: none;"
-                unselectable="on"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
+                    <span
+                      aria-label="down"
+                      class="anticon anticon-down ant-select-suffix"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="down"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span
                     aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                    class="ant-select-clear"
+                    style="user-select: none;"
+                    unselectable="on"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
+                    <span
+                      aria-label="close-circle"
+                      class="anticon anticon-close-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="close-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
+          <div
+            style="margin-left: 8px;"
+          >
+            qixian
+          </div>
         </div>
       </div>
     </div>