ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.12k stars 14.64k forks source link

[Bug Report] Incorrect use of <label for=FORM_ELEMENT> #22572

Open Macrolam opened 1 year ago

Macrolam commented 1 year ago

Element UI version

2.15.13

OS/Browsers version

macOS11.4/chrome113

Vue version

2.7.14

Reproduction Link

https://codepen.io/Macrolam/pen/xxQOWBP?editors=1111

Steps to reproduce

https://juejin.cn/post/7246638858912366649 这里有详细的阐述。codeopen不太会用,可以看这篇文章,具体复现。 1.使用表单元素的地方就会出现 2.示例代码

What is Expected?

谷歌浏览器113版本不再报红。 给el-input 等其他表单元素自动绑定一个与label标签for属性值一致的id。

What is actually happening?

报错: The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.

To fix this issue, make sure the label's for attribute references the correct id of a form field.

wangdaodao commented 1 year ago

从组件来说,加上也比较简单。但是一旦labelid绑定了之后,el-formlabel插槽中如果加了一些点击动作(例如Popover这种的),同样也会触发input这种的激活,这种情况可能就有问题了,所以建议还是手动去给inputid会灵活一点点。