When the el-select selector or date-picker, time-picker date selection drop-down option box is clicked, click the browser to return to the previous step, and it will be displayed in the upper left corner of the previous webpage [ElementUI]

Environment: ElementUI+vue3+setup syntax+ts (superset of typescript, js)

(1), bug reproduction:

I built a simple page by myself, as follows: [ The source code is at the bottom of this article ]

 Click on the pop-up window:

 Step 1: Click the drop-down box

Step 2: Click on the upper left corner to go back one step 

You can see that the bug appears:

Only applicable if the routing changes after going back one step! !

(2) Analyze the cause of the bug

Turn on F12 debugging, and you will find that something should not appear in the element:

 At the same time, it is found that the div positioning of the drop-down box here is absolute, and if no attributes such as top and left are written, its default value is 0, and absolute is absolute positioning, which is positioned according to the innermost border of the nearest parent element border . When a non-static ancestor element is positioned, it is positioned according to the outermost border of the html border .

Therefore, the div position of the drop-down box at this time will be in the upper left corner.

So, the complete logic is as follows: open the pop-up window -> click on the drop-down box -> the div element of the drop-down box is inserted into the current web page -> return to the previous step -> the element of the drop-down box is not destroyed, it remains in the In the previous webpage, and due to positioning problems, it appeared in the upper left corner

(If the route does not change, this problem will not occur)

(3) How to solve

Our requirement is: when the pop-up window is closed, the opened things in the pop-up window are also closed and destroyed.

At this time, you need to use an attribute popper-append-to-body or teleported of el-select

 By the way, post the official website address: a Vue 3 UI framework | Element Plus

At this point, you only need to add a sentence in el-select: :teleported="false"

<el-select v-model="value" class="m-2" placeholder="Select" size="large" :teleported="false">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>

Do the same operation again, and find that the element has been destroyed, the webpage is displayed normally, and the bug is solved:

TIP: The following is the source code

//router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views//HomePage.vue'
import Dialog from '@/views/dialog.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component:()=>Home
  },{
    path: '/dialog',
    name: 'dialog',
    component:()=>Dialog
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<!-- views/HomePage.vue --> 

<template>
  <div>
    <el-button @click="next">下一界面</el-button>

  </div>
</template>
  
<script lang="ts" setup>
import router from '@/router';


const next = () => {
  router.push('dialog')
}
</script>
 
<style lang="less" scoped></style>

<!-- views/dialog.vue -->
<template>
  <div>
    <el-dialog title="新界面" width="30%" destroy-on-close center v-model="dialogVisible">

      <div style="height:300px;width:600px">
        <strong>返回上一步，多选框/单选框的下拉选项信息，浮窗显示在系统左上角</strong>
        <el-select v-model="value" class="m-2" placeholder="Select" size="large" :teleported="false">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">Cancel</el-button>
          <el-button type="primary">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
<script lang="ts" setup>
import router from '@/router';


const value = ref('')
const dialogVisible = ref(true)

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const close = () => {
  router.push('/')
  dialogVisible.value = false
}
</script>
 
<style lang="less" scoped></style>