Autocomplete: add `popper-append-to-body` attribute (#12241)

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
 

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
 

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 | 说明 |

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 {

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
    */

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
    */