From cb93645728c0bf2c2d2cfc70f5194a58c8da0886 Mon Sep 17 00:00:00 2001
From: hetech <dengzhiyang123@126.com>
Date: Mon, 6 Aug 2018 19:14:16 +0800
Subject: [PATCH] Autocomplete: add `popper-append-to-body` attribute (#12241)

---
 examples/docs/en-US/input.md               | 1 +
 examples/docs/es/input.md                  | 1 +
 examples/docs/zh-CN/input.md               | 1 +
 packages/autocomplete/src/autocomplete.vue | 7 ++++++-
 types/autocomplete.d.ts                    | 3 +++
 types/select.d.ts                          | 3 +++
 6 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md
index ef57c226c..e1a47df01 100644
--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
@@ -712,6 +712,7 @@ Attribute | Description | Type | Options | Default
 | prefix-icon | prefix icon class | string | — | — |
 | suffix-icon | suffix icon class | string | — | — |
 | hide-loading | whether to hide the loading icon in remote search | boolean | — | false |
+| popper-append-to-body | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | true |
 
 ### Autocomplete Slots
 
diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md
index 3abaa09dc..a3ac4ea73 100644
--- a/examples/docs/es/input.md
+++ b/examples/docs/es/input.md
@@ -691,6 +691,7 @@ Atributo | Descripción | Tipo | Opciones | Por defecto
 | prefix-icon | prefix icon class | string | — | — |
 | suffix-icon | suffix icon class | string | — | — |
 | hide-loading | si se debe ocultar el icono de loading en la búsqueda remota | boolean | — | false |
+| popper-append-to-body | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | true |
 
 ### Autocomplete Slots
 
diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index c2afcca4a..302d94d79 100644
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -864,6 +864,7 @@ export default {
 | prefix-icon | 输入框头部图标 | string | — | — |
 | suffix-icon | 输入框尾部图标 | string | — | — |
 | hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |
+| popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | boolean | - | true |
 
 ### Autocomplete Slots
 | name | 说明 |
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index 8bfc04099..59587e623 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -35,6 +35,7 @@
       visible-arrow
       :class="[popperClass ? popperClass : '']"
       :popper-options="popperOptions"
+      :append-to-body="popperAppendToBody"
       ref="suggestions"
       :placement="placement"
       :id="id">
@@ -116,7 +117,11 @@
         type: String,
         default: 'bottom-start'
       },
-      hideLoading: Boolean
+      hideLoading: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: true
+      }
     },
     data() {
       return {
diff --git a/types/autocomplete.d.ts b/types/autocomplete.d.ts
index b37a0af97..5d8589ba6 100644
--- a/types/autocomplete.d.ts
+++ b/types/autocomplete.d.ts
@@ -65,6 +65,9 @@ export declare class ElAutocomplete extends ElementUIComponent {
   /** Whether to hide the loading icon in remote search */
   hideLoading: boolean
 
+  /** Whether to append the dropdown to body */
+  popperAppendToBody: boolean
+
   /**
    * Focus the Input component
    */
diff --git a/types/select.d.ts b/types/select.d.ts
index 417e2812f..1df71c9eb 100644
--- a/types/select.d.ts
+++ b/types/select.d.ts
@@ -69,6 +69,9 @@ export declare class ElSelect extends ElementUIComponent {
   /** Select first matching option on enter key. Use with filterable or remote */
   defaultFirstOption: boolean
 
+  /** Whether to append the popper menu to body */
+  popperAppendToBody: boolean
+
   /**
    * Focus the Input component
    */