Element: [bug report] open the drawer title, there will be a focus box by default
Element UI version
2.13.0
OS/Browsers version
chrome
Vue version
2.6.10
Reproduction Link
https://jsfiddle.net/r4g8esm9/
Steps to reproduce
打开 drawer 标题默认会有一个focus框
What is Expected?
打开 drawer 标题默认会有一个focus框
What is actually happening?
打开 drawer 标题默认会有一个focus框
allce231
All 13 comments
Translation of this issue:
Element UI version
2.13.0
OS/Browsers version
Chrome
Vue version
2.6.10
Reproduction Link
https://jsfiddle.net/r4g8esm9/
Steps to reproduce
When you open the drawer title, there will be a focus box by default
What is Expected?
When you open the drawer title, there will be a focus box by default
What is actually happening?
When you open the drawer title, there will be a focus box by default
element-bot
on 2 Dec 2019
this.$nextTick(() => {
Utils.focusFirstDescendant(this.$refs.drawer);
});
发现把这一行去掉就可以了，但是不知道为什么这么写
MBearo
on 3 Dec 2019
this.$nextTick(() => { Utils.focusFirstDescendant(this.$refs.drawer); });发现把这一行去掉就可以了，但是不知道为什么这么写
这个提交的锅，解决了一个bug，并生成了一个新的bug。😄
lowerfish
on 3 Dec 2019
this.$nextTick(() => { Utils.focusFirstDescendant(this.$refs.drawer); });发现把这一行去掉就可以了，但是不知道为什么这么写
这个提交的锅，解决了一个bug，并生成了一个新的bug。😄
看起来像是有a11y的需求？
MBearo
on 3 Dec 2019
.el-drawer > header > span:focus {
outline-color: white;
}
.el-drawer > header > button:focus {
outline-color: white;
}
.el-drawer > header > button:hover {
color: rgb(64, 158, 255);
}
qianjin1017
on 18 Dec 2019
同样遇到此问题，望修复
csxiaoyaojianxian
on 26 Feb 2020
在github上这种没有内容的回复请在一楼用 +1表态代替 issus搜索时还能按表态数排序
回复会给所有订阅者发邮件提醒的
NateScarlet
on 26 Feb 2020
如果把头部隐藏了 下面有button的话 也会有同样的问题？这个时候怎么改？现在暂时前面加了input 然后设置透明了，有更好的方法吗 大佬 @qianjin1017
liushuiyuan001
on 18 May 2020
/deep/.el-drawer__header span:focus {pointer-events: none; outline: none !important;}
https://stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome
sunceenjoy
on 14 Aug 2020
@liushuiyuan001 hi, 我也遇到了相同的问题，头部隐藏了，drawer下面有button，请问你是怎么解决的？
waiting0729
on 11 Sep 2020
修复了吗?
he5vely
on 30 Oct 2020
覆盖掉就行了
`
el-drawer__title > span {
outline: 0;
}
`
CHENJIAMIAN
on 20 Nov 2020
Duplicate of #19902
cs1707
on 30 Dec 2020
Related issues
mochenxm
·
3Comments
dbskccc
·
3Comments
yuchonghua
·
3Comments
makunsusu
·
3Comments
yorululu
·
3Comments
Most helpful comment
.el-drawer > header > span:focus {
outline-color: white;
}
.el-drawer > header > button:focus {
outline-color: white;
}
.el-drawer > header > button:hover {
color: rgb(64, 158, 255);
}