[Bug Report] Dialog closed without transition if update value in close event

[xyorz]

Element Plus version

1.0.1-beta.22

OS/Browsers version

Google Chrome 87.0.4280.141

Vue version

3.0.5

Reproduction Link

https://codepen.io/xyorz/pen/ExgRvZO

Steps to reproduce

1.open dialog.
2.close dialog.
It works in vue@3.0.3 but not as well as vue@3.0.4 and later.
I'm not quite sure this bug is caused by element-plus or vue.

What is Expected?

Dialog closed with transition.

What is actually happening?

Dialog closed without transition.

[jw-foss]

https://element-plus.org/#/zh-CN/component/dialog Dunno what happened but doc site is working fine. I'll verify it locally.

[jw-foss]

Confirmed locally, will fix.

[jw-foss]

I double checked the code.
When you pass this into the template:

  <span>需要注意的是内容是默认不居中的{{counter}}</span>

The transition closes immediately.
This might not be a bug from us, it could be a bug from vue.

[xyorz]

I found it works correctly in element-plus@1.0.1-beta.18 and previous versions.
Maybe some change cause it.

[jw-foss]

Same version of Vue@3.0.5?

[jw-foss]

I double checked the code, before v1.0.1-beta.18, we emit close event in modelValue's watcher, after the very version, we emit close event in onBeforeLeave hook in Transition, so I think the root cause is Vue transition.

[jw-foss]

I changed Vue's version back to @3.0.3 the error no long appears. But we know that Vue had lethal bug on emitting events @ version 3.0.3. So I upgrade to 3.0.4 it appears again. So that I think the bug itself is caused by Vue transition. For temporary fix I think you need to move your value manipulation in @closed event instead of close event.

[xyorz]

I see. Thanks for your help.

[jw-foss]

Confirmed as a Vue bug, check this out:
vuejs/core#2757
vuejs/core#2961

[jw-foss]

The fix is rather simple, we can switch vShow to vIf but that way we can not enable animation. Had to wait for them to fix that.

[duansheli]

bug report

when swith page , auto select checkbox not work

full code

<template>
  <el-dialog title="角色人员关联" v-model="showtb" width="55%" destroy-on-close>
    <el-table ref="tb1" border style="width: 100%" :data="tb1Data">
      <el-table-column type="selection" width="80" />
      <el-table-column prop="id" label="id" width="100" />
    </el-table>

    <el-button @click="test1" type="primary" size="small"> test1 </el-button>
    <el-button @click="test2" type="primary" size="small"> test2 </el-button>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";

const arr = [{ id: 1 }, { id: 2 }];

const showtb = ref(true);

const tb1 = ref(null);
const tb1Data = ref([]);
tb1Data.value = [...arr];
let num = 3;

function test1() {
  // mock switch page 
  const a = { id: num };
  num++;

  {
    // good-mode
    tb1Data.value.push(a);
  }
  {
    // bad-mode
    arr.push(a);
    tb1Data.value = [...arr];
  }

  test2(); 
}
function test2() {
  tb1.value.toggleRowSelection(tb1Data.value[1], true);
}
</script>

---

with this code

 {
    tb1Data.value.push(a);
  }

checkbox will select

---

with this code

  {
    arr.push(a);
    tb1Data.value = [...arr];
  }

checkbox won't select

[duansheli]

@JeremyWuuuuu
在 Dialog 中 使用table
在 mounted 阶段 无法获取到 table组件的引用

解决办法为：
在 Dialog 的 opened 事件发生阶段 可获取到table组件的引用
于是对 table 的 自动勾选 放在了opened 事件中

不知道这算不算个bug

[Ryan2128]

New version of vue has been released. If still has problem, please reopen this issue.