html组件的focus状态会影响Modal关闭后页面的滚动位置 #1319
Description
"ant-design-vue": "^1.4.1",
当页面中有“处于focus状态的组件”且在Modal打开后仍然“保持有focus状态”的话，那么无论页面滚动到何位置，在关闭Modal后都将滚动到"有focus状态的组件"的位置
下面的代码在点击Tab后
- 立即用黑色边框标示出组件是否获得focus状态
- 1秒后滚动500px
- 2秒后打开Modal
通过任何形式关闭Modal都会滚动回Tab位置
<template>
<div>
<a-tabs @change="onTabChange">
<a-tab-pane tab="tab1" key="1"></a-tab-pane>
<a-tab-pane tab="tab2" key="2"></a-tab-pane>
<a-tab-pane tab="tab3" key="3"></a-tab-pane>
<a-tab-pane tab="tab4" key="4"></a-tab-pane>
</a-tabs>
<br> <br> <br> <br> <br> <br> <br>1
<br> <br> <br> <br> <br> <br> <br>2
<br> <br> <br> <br> <br> <br> <br>3
<br> <br> <br> <br> <br> <br> <br>4
<br> <br> <br> <br> <br> <br> <br>5
<br> <br> <br> <br> <br> <br> <br>6
<br> <br> <br> <br> <br> <br> <br>7
<br> <br> <br> <br> <br> <br> <br>8
<br> <br> <br> <br> <br> <br> <br>9
<br> <br> <br> <br> <br> <br> <br>10
<br> <br> <br> <br> <br> <br> <br>11
<br> <br> <br> <br> <br> <br> <br>12
<br> <br> <br> <br> <br> <br> <br>13
<br> <br> <br> <br> <br> <br> <br>14
<br> <br> <br> <br> <br> <br> <br>15
<br> <br> <br> <br> <br> <br> <br>16
<br> <br> <br> <br> <br> <br> <br>17
<br> <br> <br> <br> <br> <br> <br>18
<br> <br> <br> <br> <br> <br> <br>19
<br> <br> <br> <br> <br> <br> <br>20
<a-modal title="test" v-model="visible">
test
</a-modal>
</div>
</template>
<script>
import {Modal, Tabs} from 'ant-design-vue';
export default {
name: "UserTrend",
components: {
[Tabs.name]: Tabs,
[Tabs.TabPane.name]: Tabs.TabPane,
[Modal.name]: Modal
},
data() {
return {
visible: false
}
},
methods: {
onTabChange() {
setTimeout(() => {
document.querySelector('.content.ant-layout-content').scrollTop = 500;
}, 1000);
setTimeout(() => {
this.visible = true;
}, 2000);
}
}
}
</script>
<style>
div:focus {
border: 1px solid #000 !important;
}
</style>
临时解决方案:
弹出Modal前对有focus状态的DOM元素执行blur操作
The issue which is not created via https://vuecomponent.github.io/issue-helper/ will be closed immediately.
注意：不是用 https://vuecomponent.github.io/issue-helper/ 或 http://ant-design-vue.gitee.io/issue-helper/ 创建的 issue 会被立即关闭。