[Bug Report] [Component] [button] el-button点击鼠标弹起后样式未复原

[Archmage83]

Bug Type: Component

Environment

• Vue Version: 3.2.37
• Element Plus Version: 2.2.6
• Browser / OS: chrome 102.0.5005.115
• Build Tool: Vue CLI

Reproduction

Related Component

• el-button

Reproduction Link

Element Plus Playground

Steps to reproduce

el-button在chrome和firefox浏览器上，点击按钮，鼠标按下时候样式改变，但是鼠标弹起的时候样式还是按下时候的样式，没有还原。
chrome和firefox浏览器必现此问题，safari上正常

What is Expected?

el-button还原初始状态

What is actually happening?

el-button在鼠标点击弹起后还是按下的状态

Additional comments

(empty)

[sxzz]

By design, 这是 Button 的 focus 状态。

[sxzz]

但是 Safari 没有这个效果 /cc @YunYouJun

[YunYouJun]

要想让Safari浏览器下按钮元素在点击后保持focus状态，目前是没有什么有效方法的。

细说iOS Safari下focus的行为
iOS Safari浏览器下的focus行为和其他浏览器都一些明显不一致的地方，有时候会给开发带来困扰，这里就说说相关的细节知识，均源自于自己日常开发遇到的问题。
https://www.zhangxinxu.com/wordpress/2020/10/ios-safari-input-button-focus/

[Archmage83]

By design, 这是 Button 的 focus 状态。

点击弹起后应该复原状态吧，为什么还要focus呢？目前产品和设计都不满意这个逻辑，是否能禁用这个效果呢？

[YunYouJun]

@huangzhongzhong

[Archmage83]

但是 Safari 没有这个效果 /cc @YunYouJun

是否能让用户选择是否需要这个效果呢？目前先用tdesign-vue-next和arco-design-vue都没有这个效果

[wjw-gavin]

现在 按钮 的状态确实有点迷，公司产品和设计都不认可...
还有这个问题： #8213

[norangit]

想要按钮弹起后去掉样式其实也简单，自己写个指令加在el-button上，里面监听click事件,监听到后在body上click下，或者放个隐藏的button，在这个button上点下。

要么在app里监听body的点击事件，使用事件捕获，如果event.target 是el-button，则在别的地方click下

[norangit]

暴力一点，直接覆写button的focus样式，没人会长按下去不松开故意看el-button 的样式，正常的点击下就是处于focus状态，这是正常逻辑。自己的特殊需求可以自己特殊处理一下

[Archmage83]

监听

按下是focus状态没错，但是你松开还是focus状态？合理吗？松开不就是正常状态吗？

[norangit]

监听

按下是focus状态没错，但是你松开还是focus状态？合理吗？松开不就是正常状态吗？

提问之前先多看看官方文档，以及规范，然后再来提问
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

https://html.spec.whatwg.org/multipage/semantics-other.html#selector-focus

这是浏览器默认行为：

Demo

不要想当然的，你以为的就是你以为的，你看见的就是你看见的。深入研究，不基于表面

[Archmage83]

监听

按下是focus状态没错，但是你松开还是focus状态？合理吗？松开不就是正常状态吗？

提问之前先多看看官方文档，以及规范，然后再来提问 https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

https://html.spec.whatwg.org/multipage/semantics-other.html#selector-focus

这是浏览器默认行为：

Demo

不要想当然的，你以为的就是你以为的，你看见的就是你看见的。深入研究，不基于表面

但是为什么以下两个UI库没有这个问题呢？
https://tdesign.tencent.com/vue-next/components/button

https://arco.design/vue/component/button

[norangit]

监听

按下是focus状态没错，但是你松开还是focus状态？合理吗？松开不就是正常状态吗？

提问之前先多看看官方文档，以及规范，然后再来提问 https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
https://html.spec.whatwg.org/multipage/semantics-other.html#selector-focus
这是浏览器默认行为：
Demo
不要想当然的，你以为的就是你以为的，你看见的就是你看见的。深入研究，不基于表面

但是为什么以下两个UI库没有这个问题呢？ https://tdesign.tencent.com/vue-next/components/button

https://arco.design/vue/component/button

额。。。这个，为什么你的需求不符合规范呢？每个人有每个人的想法，每个类库也有自己的想法。往大里说就太多了，自己思考吧...

[YunYouJun]

:focus 的实现属于 Web 标准，因此实际上这部分并非 UI 组件库所应该强制覆盖的事情。
当然如果你需要你的效果，你完全可以覆盖 :focus 样式，通过添加自定义的 .active 实现。

TDesign 和 Arco 之所以没有，是因为他们为按钮加了动画，通过了类进行模拟，而没有使用 :focus。（事实上我觉得这是为了体验做出的牺牲，而没有完全依照 Web 的规范标准。）

同样我也可以举例出遵守这一标准的组件库，譬如 naive-ui 以及 ant-design，它们的按钮按下后和 element-plus 一样保持了 focus 状态。
因此我认为这是是否遵循 :focus 标准的问题，而非 UI 组件库应该强制覆盖实现，希望理解。

[sxzz]

For English version:

The implementation of :focus is a Web standard, so it's not really something that the UI component library should be forced to override.
Of course if you need your effect, you can override the :focus style entirely, by adding a custom .active implementation.

The reason TDesign and Arco don't have it is because they have animated the buttons, simulated by classes, and don't use :focus. (In fact, I think this is a sacrifice for the experience, rather than following the Web's standards.)

I can also give examples of component libraries that adhere to this standard, such as naive-ui and ant-design, which keep the focus state when the button is pressed, just like element-plus.
So I think it's a matter of following the :focus standard, not a UI component library that should be forced to override it, I hope that's understood.

Translated with www.DeepL.com/Translator (free version)

[BTBMan]

参考原生button并没有focus样式 同样看了material-ui也没有focus样式 我觉得这个需求可以让用户自行选择 有些是须要focus样式 有些则不需要 强制覆盖虽说可以 如果要覆盖全部的type 感觉还是挺冗余的

[YunYouJun]

material-ui 也是点击时有波纹动画，与 tdesign 和 arco 类似。反之无特殊动画的组件库则默认为浏览器行为。
特意添加这部分可选功能反而比较冗余（个人观点）。

[BTBMan]

其实ant点击按钮也有动画效果 但是它依然添加了foucs的样式

:focus 的实现属于 Web 标准，因此实际上这部分并非 UI 组件库所应该强制覆盖的事情。

实际上element及ant等ui库是不是已经覆盖了按钮focus的默认样式呢？

因为原生的button并没有focus样式（可能在不同浏览器样有所不同）大多情况是原生的input这类是有默认的样式

[lidasong]

对el-button点击全局监控，自动blur
document.body.addEventListener("click", ({ target }: any) => {
if (target.className.includes("el-button")) target.blur();
if (target.parentElement.className.includes("el-button"))
target.parentElement.blur();
});

[yan-zhi-cheng]

监听

按下是focus状态没错，但是你松开还是focus状态？合理吗？松开不就是正常状态吗？

提问之前先多看看官方文档，以及规范，然后再来提问 https://developer.mozilla.org/en-US/docs/Web/CSS/:focus https://html.spec.whatwg.org/multipage/semantics-other.html#selector-focus 这是浏览器默认行为： Demo 不要想当然的，你以为的就是你以为的，你看见的就是你看见的。深入研究，不基于表面

但是为什么以下两个UI库没有这个问题呢？ https://tdesign.tencent.com/vue-next/components/button
https://arco.design/vue/component/button

额。。。这个，为什么你的需求不符合规范呢？每个人有每个人的想法，每个类库也有自己的想法。往大里说就太多了，自己思考吧...

为什么按钮按下去后鼠标离开状态不恢复为正常的需求是合理呢？就因为有这么个规范而要自适应？不适用普遍开发场景的规范那就是傲慢

[YunYouJun]

监听

按下是focus状态没错，但是你松开还是focus状态？合理吗？松开不就是正常状态吗？

提问之前先多看看官方文档，以及规范，然后再来提问 developer.mozilla.org/en-US/docs/Web/CSS/:focus html.spec.whatwg.org/multipage/semantics-other.html#selector-focus 这是浏览器默认行为： Demo 不要想当然的，你以为的就是你以为的，你看见的就是你看见的。深入研究，不基于表面

但是为什么以下两个UI库没有这个问题呢？ tdesign.tencent.com/vue-next/components/button
arco.design/vue/component/button

额。。。这个，为什么你的需求不符合规范呢？每个人有每个人的想法，每个类库也有自己的想法。往大里说就太多了，自己思考吧...

为什么按钮按下去后鼠标离开状态不恢复为正常的需求是合理呢？就因为有这么个规范而要自适应？不适用普遍开发场景的规范那就是傲慢

---

修改它的默认表现并不是很复杂的工作，但如果我们修改后，会不会有别的人来贴出规范指着我们说「不遵守规范的设计就是自作多情」呢？

[yan-zhi-cheng]

监听

按下是focus状态没错，但是你松开还是focus状态？合理吗？松开不就是正常状态吗？

提问之前先多看看官方文档，以及规范，然后再来提问 developer.mozilla.org/en-US/docs/Web/CSS/:focus html.spec.whatwg.org/multipage/semantics-other.html#selector-focus 这是浏览器默认行为： Demo 不要想当然的，你以为的就是你以为的，你看见的就是你看见的。深入研究，不基于表面

但是为什么以下两个UI库没有这个问题呢？ tdesign.tencent.com/vue-next/components/button
arco.design/vue/component/button

额。。。这个，为什么你的需求不符合规范呢？每个人有每个人的想法，每个类库也有自己的想法。往大里说就太多了，自己思考吧...

为什么按钮按下去后鼠标离开状态不恢复为正常的需求是合理呢？就因为有这么个规范而要自适应？不适用普遍开发场景的规范那就是傲慢

修改它的默认表现并不是很复杂的工作，但如果我们修改后，会不会有别的人来贴出规范指着我们说「不遵守规范的设计就是自作多情」呢？

没有规矩不成方圆本身没有问题，但前提是规矩适用大多数，本身我是刚接触前端开发工作准备搞全栈，第一反应便是希望在这个微不足道的按钮上能否得到舒适的反馈，就跟鼠标悬停后离开的效果保持一致。而我也是在之前回复你后已自行修改，就像你说的并不复杂，而鼠标离开后无论是否点击按钮，状态都该保持未选中效果是否也可以成为某种规矩呢？其实这就很像法律学多后与普通人心中的普适正义背道而驰一样教条化，我认为这反而很危险

[Mooooooon]

没有规矩不成方圆本身没有问题，但前提是规矩适用大多数，本身我是刚接触前端开发工作准备搞全栈，第一反应便是希望在这个微不足道的按钮上能否得到舒适的反馈，就跟鼠标悬停后离开的效果保持一致。而我也是在之前回复你后已自行修改，就像你说的并不复杂，而鼠标离开后无论是否点击按钮，状态都该保持未选中效果是否也可以成为某种规矩呢？其实这就很像法律学多后与普通人心中的普适正义背道而驰一样教条化，我认为这反而很危险

仔细想了一下可能要照顾残疾人吧，他们可能需要语音播报或者按键来操作，需要focus状态确定当前的按钮，没法像普通人一样去点击

[QUALIAZX]

监听

按下是focus状态没错，但是你松开还是focus状态？合理吗？松开不就是正常状态吗？

提问之前先多看看官方文档，以及规范，然后再来提问 developer.mozilla.org/en-US/docs/Web/CSS/:focus html.spec.whatwg.org/multipage/semantics-other.html#selector-focus 这是浏览器默认行为： Demo 不要想当然的，你以为的就是你以为的，你看见的就是你看见的。深入研究，不基于表面

但是为什么以下两个UI库没有这个问题呢？ tdesign.tencent.com/vue-next/components/button
arco.design/vue/component/button

额。。。这个，为什么你的需求不符合规范呢？每个人有每个人的想法，每个类库也有自己的想法。往大里说就太多了，自己思考吧...

为什么按钮按下去后鼠标离开状态不恢复为正常的需求是合理呢？就因为有这么个规范而要自适应？不适用普遍开发场景的规范那就是傲慢

修改它的默认表现并不是很复杂的工作，但如果我们修改后，会不会有别的人来贴出规范指着我们说「不遵守规范的设计就是自作多情」呢？

没有规矩不成方圆本身没有问题，但前提是规矩适用大多数，本身我是刚接触前端开发工作准备搞全栈，第一反应便是希望在这个微不足道的按钮上能否得到舒适的反馈，就跟鼠标悬停后离开的效果保持一致。而我也是在之前回复你后已自行修改，就像你说的并不复杂，而鼠标离开后无论是否点击按钮，状态都该保持未选中效果是否也可以成为某种规矩呢？其实这就很像法律学多后与普通人心中的普适正义背道而驰一样教条化，我认为这反而很危险

不适用普遍开发场景的规范那就是傲慢。如何确定自己的开发场景就是普遍的开发场景？