Fix AutoCompelete layout, close ant-design#7800

kwingram25 · Oct 8, 2017 · 95c7295 · 95c7295
1 parent 31d0c3a
commit 95c7295
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 57 deletions.
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -1,59 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/auto-complete/demo/antd.md correctly 1`] = `
-<div
-  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
-  style="width:200px;height:50px;"
->
-  <div
-    aria-autocomplete="list"
-    aria-expanded="false"
-    aria-haspopup="true"
-    class="ant-select-selection
-              ant-select-selection--single"
-    role="combobox"
-  >
-    <div
-      class="ant-select-selection__rendered"
-    >
-      <div
-        class="ant-select-selection__placeholder"
-        style="display:block;user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable"
-      >
-        input here
-      </div>
-      <ul>
-        <li
-          class="ant-select-search ant-select-search--inline"
-        >
-          <div
-            class="ant-select-search__field__wrap"
-          >
-            <textarea
-              class="ant-input custom ant-select-search__field"
-              style="height:50px;"
-            />
-            <span
-              class="ant-select-search__field__mirror"
-            >
-               
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <span
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none;"
-      unselectable="unselectable"
-    >
-      <b />
-    </span>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
 <div
   class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
@@ -180,6 +126,54 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
 </div>
 `;
 
+exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
+<div
+  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
+  style="width:200px;"
+>
+  <div
+    aria-autocomplete="list"
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="ant-select-selection
+              ant-select-selection--single"
+    role="combobox"
+  >
+    <div
+      class="ant-select-selection__rendered"
+    >
+      <ul>
+        <li
+          class="ant-select-search ant-select-search--inline"
+        >
+          <div
+            class="ant-select-search__field__wrap"
+          >
+            <textarea
+              class="ant-input custom ant-select-search__field"
+              placeholder="input here"
+              style="height:50px;"
+            />
+            <span
+              class="ant-select-search__field__mirror"
+            >
+               
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <span
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none;"
+      unselectable="unselectable"
+    >
+      <b />
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
 <div
   class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"

diff --git a/components/auto-complete/demo/antd.md → components/auto-complete/demo/custom.md b/components/auto-complete/demo/antd.md → components/auto-complete/demo/custom.md
@@ -45,12 +45,16 @@ class Complete extends React.Component {
     return (
       <AutoComplete
         dataSource={dataSource}
-        style={{ width: 200, height: 50 }}
+        style={{ width: 200 }}
         onSelect={onSelect}
         onSearch={this.handleSearch}
-        placeholder="input here"
       >
-        <TextArea className="custom" onKeyPress={this.handleKeyPress} style={{ height: 50 }} />
+        <TextArea
+          placeholder="input here"
+          className="custom"
+          style={{ height: 50 }}
+          onKeyPress={this.handleKeyPress}
+        />
       </AutoComplete>
     );
   }

diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less
@@ -22,9 +22,19 @@
           margin-left: (@input-padding-horizontal + 1px);
           margin-right: (@input-padding-horizontal + 1px);
         }
+
+        &--single {
+          height: auto;
+        }
       }
     }
 
+    // Fix https://github.com/ant-design/ant-design/issues/7800
+    .@{select-prefix-cls}-search--inline {
+      position: static;
+      float: left;
+    }
+
     &-allow-clear {
       .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
         margin-right: 0 !important;

diff --git a/components/select/style/index.less b/components/select/style/index.less
@@ -465,6 +465,7 @@
       white-space: nowrap;
       cursor: pointer;
       overflow: hidden;
+      text-overflow: ellipsis;
       transition: background 0.3s ease;
 
       &:hover {