fix(popper): revert appendToBody from false to true (#845)

packages/autocomplete/__tests__/autocomplete.spec.ts

@@ -76,11 +76,11 @@ describe('Autocomplete.vue', () => {
     const wrapper = _mount()
 
     await wrapper.setProps({ popperClass: 'error' })
-    expect(wrapper.find('.el-popper').classes('error')).toBe(true)
+    expect(document.body.querySelector('.el-popper').classList.contains('error')).toBe(true)
 
     await wrapper.setProps({ popperClass: 'success' })
-    expect(wrapper.find('.el-popper').classes('error')).toBe(false)
-    expect(wrapper.find('.el-popper').classes('success')).toBe(true)
+    expect(document.body.querySelector('.el-popper').classList.contains('error')).toBe(false)
+    expect(document.body.querySelector('.el-popper').classList.contains('success')).toBe(true)
   })
 
   test('popperAppendToBody', async () => {

packages/autocomplete/src/index.vue

@@ -155,7 +155,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    popperAppendToBody: Boolean,
+    popperAppendToBody: {
+      type: Boolean,
+      default: true,
+    },
     highlightFirstItem: {
       type: Boolean,
       default: false,

packages/cascader/__tests__/cascader.spec.ts

@@ -309,11 +309,11 @@ describe('Cascader.vue', () => {
     })
 
     const input = wrapper.find('input')
-    const dropdown = wrapper.find(DROPDOWN)
+    const dropdown = document.querySelector(DROPDOWN)
     input.element.value = 'ha'
     await input.trigger('input')
-    const hzSuggestion = dropdown.find(SUGGESTION_ITEM)
+    const hzSuggestion = dropdown.querySelector(SUGGESTION_ITEM) as HTMLElement
     expect(filterMethod).toBeCalled()
-    expect(hzSuggestion.text()).toBe('Zhejiang / Hangzhou')
+    expect(hzSuggestion.textContent).toBe('Zhejiang / Hangzhou')
   })
 })

packages/pagination/__tests__/pagination.spec.ts

@@ -210,8 +210,8 @@ describe('click pager', () => {
       },
     })
 
-    const items = wrapper.findAll('.el-select-dropdown__item:not(.selected)')
-    await items[0].trigger('click')
+    const items = document.querySelectorAll('.el-select-dropdown__item:not(.selected)');
+    (items[0] as HTMLOptionElement)?.click()
     expect(onSizeChange).toHaveBeenCalled()
     expect(wrapper.findComponent(Pagination).emitted()).toHaveProperty('size-change')
   })

packages/popper/__tests__/popper.spec.ts

@@ -82,7 +82,7 @@ describe('Popper.vue', () => {
 
   test('append to body', () => {
     let wrapper = _mount()
-    expect(wrapper.find(selector).exists()).toBe(true)
+    expect(wrapper.find(selector).exists()).toBe(false)
 
     /**
      * Current layout of `ElPopper`
@@ -93,14 +93,16 @@ describe('Popper.vue', () => {
      */
 
     wrapper = _mount({
-      appendToBody: true,
+      appendToBody: false,
     })
 
-    expect(wrapper.find(selector).exists()).toBe(false)
+    expect(wrapper.find(selector).exists()).toBe(true)
   })
 
   test('popper z-index should be dynamical', () => {
-    const wrapper = _mount()
+    const wrapper = _mount({
+      appendToBody: false,
+    })
 
     expect(
       Number.parseInt(
@@ -151,6 +153,7 @@ describe('Popper.vue', () => {
     document.addEventListener('mousedown', onMouseDown)
 
     const wrapper = _mount({
+      appendToBody: false,
       stopPopperMouseEvent: false,
       visible: true,
     })

packages/popper/src/use-popper/defaults.ts

@@ -48,7 +48,7 @@ export default {
   },
   appendToBody: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   boundariesPadding: {
     type: Number,

packages/select/src/select.vue

@@ -243,7 +243,10 @@ export default defineComponent({
       default: 'value',
     },
     collapseTags: Boolean,
-    popperAppendToBody: Boolean,
+    popperAppendToBody: {
+      type: Boolean,
+      default: true,
+    },
     clearIcon: {
       type: String,
       default: 'el-icon-circle-close',