From 99dbe0e23339326df624ed56ad2f85eca6746cd3 Mon Sep 17 00:00:00 2001
From: Simona <36978416+SimonaliaChen@users.noreply.github.com>
Date: Sat, 5 Dec 2020 12:30:15 +0800
Subject: [PATCH] fix(popper): revert appendToBody from false to true (#845)

---
 packages/autocomplete/__tests__/autocomplete.spec.ts |  6 +++---
 packages/autocomplete/src/index.vue                  |  5 ++++-
 packages/cascader/__tests__/cascader.spec.ts         |  6 +++---
 packages/pagination/__tests__/pagination.spec.ts     |  4 ++--
 packages/popper/__tests__/popper.spec.ts             | 11 +++++++----
 packages/popper/src/use-popper/defaults.ts           |  2 +-
 packages/select/src/select.vue                       |  5 ++++-
 7 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/autocomplete/__tests__/autocomplete.spec.ts b/packages/autocomplete/__tests__/autocomplete.spec.ts
index 80d93054fd..5dcee2863e 100644
--- a/packages/autocomplete/__tests__/autocomplete.spec.ts
+++ b/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 () => {
diff --git a/packages/autocomplete/src/index.vue b/packages/autocomplete/src/index.vue
index 9856be9f87..a7e0602711 100644
--- a/packages/autocomplete/src/index.vue
+++ b/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,
diff --git a/packages/cascader/__tests__/cascader.spec.ts b/packages/cascader/__tests__/cascader.spec.ts
index 4d38b5558e..27f867df32 100644
--- a/packages/cascader/__tests__/cascader.spec.ts
+++ b/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')
   })
 })
diff --git a/packages/pagination/__tests__/pagination.spec.ts b/packages/pagination/__tests__/pagination.spec.ts
index 59575a307e..da00f2a6ed 100644
--- a/packages/pagination/__tests__/pagination.spec.ts
+++ b/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')
   })
diff --git a/packages/popper/__tests__/popper.spec.ts b/packages/popper/__tests__/popper.spec.ts
index 84868e7ceb..cdf55318b3 100644
--- a/packages/popper/__tests__/popper.spec.ts
+++ b/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,
     })
diff --git a/packages/popper/src/use-popper/defaults.ts b/packages/popper/src/use-popper/defaults.ts
index c36da5694d..65cf5be065 100644
--- a/packages/popper/src/use-popper/defaults.ts
+++ b/packages/popper/src/use-popper/defaults.ts
@@ -48,7 +48,7 @@ export default {
   },
   appendToBody: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   boundariesPadding: {
     type: Number,
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 45f610a5c0..4143668126 100644
--- a/packages/select/src/select.vue
+++ b/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',