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

6jygbczu  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(62)

Element UI version

2.15.13

OS/Browsers version

macOS11.4/chrome113

Vue version

2.7.14

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.

x4shl7ld

x4shl7ld1#

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

相关问题