Element: [Bug Report] date-picker下拉框位置错误

Created on 7 Aug 2018 · 4Comments · Source: ElemeFE/element

Element UI version

2.4.5

OS/Browsers version

win10 firefox 61

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/mmx38qxw/4655/

Steps to reproduce

点击‘切换’后，再点击date-picker会发现弹出层位置不正确，它的position变为fixed了

What is Expected?

date-picker弹出层位置正确

What is actually happening?

date-picker弹出层位置不正确

date-picker bug

Source

Kinghts

Most helpful comment

这个并不算Element的bug，你在v-if与v-else中使用了同一种Component，这两个Component属性也基本一致，所以Vue会复用之前的组件，但Vue中应该避免复用自定义的复杂的组件，很容易出问题，这也是v-for内必须加入key的原因。
这个issue就是复用组件时没有把内部引用的this.$refs.reference修改过来，计算popover的位置出错。
解决的方法是在两个DatePicker上加上key属性，明确告知Vue这是两个不同的组件，避免组件的复用https://jsfiddle.net/HarlanLuo/mmx38qxw/6731/

elfman on 28 Oct 2018

👍15

All 4 comments

Translation of this issue:

Element UI version
2.4.5

OS/Browsers version
Win10 Firefox 61

Vue version
2.5.17

Reproduction Link
https://jsfiddle.net/mmx38qxw/4655/

Steps to reproduce
After clicking toggle, clicking date-picker will find out the incorrect location of the popup layer, and its position will be fixed.

What is Expected?
Date-picker pop-up position is correct

What is actually happening?
The position of the date-picker pop-up layer is incorrect

element-bot on 7 Aug 2018

Caused by: https://github.com/vuejs/vue/issues/3467 , also refer to https://github.com/vuejs/vue/issues/2873. $refs is no longer reactive.

Need to rewrite vue-popper implementation to get component reference every time. Should check and deprecate all usage of $refs in computed property.

@jikkai I recommend this issue to be considered for 3.0 milestone.