The b-form-group adds aria-describedby to the input specified, and looks for it based on the given label-for. When the id of the input uses special characters, which are valid HTML5 (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id), a console error happens, and the aria-describedby is not added.
The reason for this is that the special characters are not escaped inside querySelector.
I encountered this bug when using an id that comes from a FHIR Questionnaire, which usually has ids like /15478-3. We are not in control of these ids, and it's kind of a standard practice to use this / character for them.
Just use /my-id for example:
<b-form-group ... label-for="/my-id">...</b-form-group>
See for a working example, and notice the console error, which makes the component "failing": https://codesandbox.io/s/serene-dewdney-ydnnu
Expected behaviorAs these characters are allowed in HTML5, though have a compatibility warning for HTML4, this should just work, as a library like this must not be concerned with these warnings, as it's up to the user to decide if they want to be compatible.
VersionsLibraries:
Environment:
Thx for the playground and export links, this really makes it easy to have min. reproductions.
https://codesandbox.io/s/serene-dewdney-ydnnu
Additional contextLike mentioned earlier, we are in no control of the ids being used, as our application is a consumer of these, and we have to use them.
The solution is just to use CSS.escape to escape the selector. I will see to create a PR to resolve this. Unless there are any concerns in doing this, as I don't know all internals of this library.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4