diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index 51da60b49c..987eaa721e 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -23,7 +23,8 @@ exports[`test renders ./components/auto-complete/demo/antd.md correctly 1`] = `
+ class="ant-input ant-select-search__field"
+ style="height:50px;" />
diff --git a/components/auto-complete/demo/antd.md b/components/auto-complete/demo/antd.md
index 870a3dac5d..3f677ce1c0 100644
--- a/components/auto-complete/demo/antd.md
+++ b/components/auto-complete/demo/antd.md
@@ -48,7 +48,7 @@ const Complete = React.createClass({
onChange={this.handleChange}
placeholder="input here"
>
-
+
);
},
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index da808ce365..0be5f83c07 100755
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -94,7 +94,7 @@ export default class AutoComplete extends React.Component).type === Option) {
- options = childArray;
+ options = children;
} else {
options = dataSource ? dataSource.map((item) => {
if (React.isValidElement(item)) {
diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less
index 0139a16deb..529c1e6e86 100644
--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@@ -6,35 +6,60 @@
@select-prefix-cls: ~"@{ant-prefix}-select";
@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
-.@{autocomplete-prefix-cls}.@{select-prefix-cls} {
+.@{autocomplete-prefix-cls} {
+ &.@{select-prefix-cls} {
- .@{select-prefix-cls} {
- &-search--inline {
- position: relative;
+ .@{select-prefix-cls} {
+ &-search--inline {
+ position: relative;
+ }
+ &-selection {
+ border: 0;
+ &--single {
+ height: auto;
+ }
+ &__rendered {
+ margin-left: 0;
+ margin-right: 0;
+ line-height: 0;
+ }
+ &__placeholder {
+ margin-left: 8px;
+ margin-right: 8px;
+ top: @input-height-base / 2;
+ }
+ }
}
- &-selection {
- border: 0;
- &--single {
- height: auto;
+
+ .@{input-prefix-cls} {
+ .input();
+ background: transparent;
+ }
+
+ &-lg {
+ .@{select-prefix-cls}-selection__placeholder {
+ top: @input-height-lg / 2;
}
- &__rendered {
- margin-left: 0;
- margin-right: 0;
- line-height: 0;
+ .@{input-prefix-cls} {
+ .input-lg();
}
- &__placeholder {
- margin-left: 8px;
- margin-right: 8px;
- top: 12px;
+ }
+
+ &-sm {
+ .@{select-prefix-cls}-selection__placeholder {
+ top: @input-height-sm / 2;
+ }
+ .@{input-prefix-cls} {
+ .input-sm();
}
}
- }
- .@{input-prefix-cls} {
- border: 1px solid @border-color-base;
- &:focus,
- &:hover {
- .hover;
+ .@{input-prefix-cls} {
+ border: @border-width-base @border-style-base @border-color-base;
+ &:focus,
+ &:hover {
+ .hover;
+ }
}
}
}