From 2e3937ecbf3a71ab76d8f9bb557b15674b3c5567 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 12 Jul 2021 13:25:41 +0800
Subject: [PATCH] style: fix Cascader style inside Input addon (#31350)

close #31333
---
 .../__tests__/__snapshots__/demo.test.js.snap | 84 ++++++++++++++++---
 components/input/demo/addon.md                | 26 +++---
 components/input/style/mixin.less             | 11 +++
 3 files changed, 96 insertions(+), 25 deletions(-)

diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index e1f336cdc1..48c8abf63d 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/input/demo/addon.md correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+>
   <div
-    style="margin-bottom:16px"
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <span
       class="ant-input-group-wrapper"
@@ -28,9 +31,10 @@ Array [
         </span>
       </span>
     </span>
-  </div>,
+  </div>
   <div
-    style="margin-bottom:16px"
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <span
       class="ant-input-group-wrapper"
@@ -171,9 +175,10 @@ Array [
         </span>
       </span>
     </span>
-  </div>,
+  </div>
   <div
-    style="margin-bottom:16px"
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <span
       class="ant-input-group-wrapper"
@@ -211,9 +216,10 @@ Array [
         </span>
       </span>
     </span>
-  </div>,
+  </div>
   <div
-    style="margin-bottom:16px"
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <span
       class="ant-input-group-wrapper"
@@ -242,8 +248,66 @@ Array [
         </span>
       </span>
     </span>
-  </div>,
-]
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-input-group-wrapper"
+    >
+      <span
+        class="ant-input-wrapper ant-input-group"
+      >
+        <span
+          class="ant-input-group-addon"
+        >
+          <span
+            class="ant-cascader-picker"
+            style="width:150px"
+            tabindex="0"
+          >
+            <span
+              class="ant-cascader-picker-label"
+            />
+            <input
+              autocomplete="off"
+              class="ant-input ant-cascader-input "
+              placeholder="cascader"
+              readonly=""
+              tabindex="-1"
+              type="text"
+              value=""
+            />
+            <span
+              aria-label="down"
+              class="anticon anticon-down ant-cascader-picker-arrow"
+              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>
+        <input
+          class="ant-input"
+          type="text"
+          value="mysite"
+        />
+      </span>
+    </span>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/input/demo/align.md correctly 1`] = `
diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md
index a2d878e3bd..31426e1d64 100644
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -14,7 +14,7 @@ title:
 Using pre & post tabs example.
 
 ```jsx
-import { Input, Select } from 'antd';
+import { Input, Select, Space, Cascader } from 'antd';
 import { SettingOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
@@ -35,20 +35,16 @@ const selectAfter = (
 );
 
 ReactDOM.render(
-  <>
-    <div style={{ marginBottom: 16 }}>
-      <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
-    </div>
-    <div style={{ marginBottom: 16 }}>
-      <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
-    </div>
-    <div style={{ marginBottom: 16 }}>
-      <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
-    </div>
-    <div style={{ marginBottom: 16 }}>
-      <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
-    </div>
-  </>,
+  <Space direction="vertical">
+    <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
+    <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
+    <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
+    <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
+    <Input
+      addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
+      defaultValue="mysite"
+    />
+  </Space>,
   mountNode,
 );
 ```
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index 73d7c1452e..f07f15bfbf 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -205,6 +205,17 @@
         }
       }
     }
+
+    // https://github.com/ant-design/ant-design/issues/31333
+    .@{ant-prefix}-cascader-picker {
+      margin: -9px (-@control-padding-horizontal);
+      background-color: transparent;
+      .@{ant-prefix}-cascader-input {
+        text-align: left;
+        border: 0;
+        box-shadow: none;
+      }
+    }
   }
 
   // Reset rounded corners