-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Failed to execute 'querySelector' on 'Element': '#/my-id' is not a valid selector. #5561
Labels
Comments
dietergeerts
added a commit
to dietergeerts/bootstrap-vue
that referenced
this issue
Jul 8, 2020
Special characters are allowed in HTML5 (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) but need to be escaped when used in a selector for usage in e.g. "querySelector" Refs bootstrap-vue#5561
21 tasks
21 tasks
See my answer at #4927:
|
jacobmllr95
added a commit
that referenced
this issue
Jul 21, 2020
…4927, #5561) (#5564) * fix(b-form-group): make it work for ids with special characters like "/" Special characters are allowed in HTML5 (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) but need to be escaped when used in a selector for usage in e.g. "querySelector" Refs #5561 * Use own `cssEscape()` util + use/test everywhere needed Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
jacobmllr95
added a commit
that referenced
this issue
Jul 28, 2020
* chore(deps): update all non-major dependencies (#5430) Co-authored-by: Renovate Bot <bot@renovateapp.com> * fix(b-form-checkbox-group): only emit `input` when value loosely changes (#5432) * fix(b-form-checkbox-group, b-form-radio-group): only emit `input` when value loosely changes * Update loose-equal.js * Update form-checkbox-group.spec.js * chore(deps): update all non-major dependencies (#5440) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency vue-router to ^3.3.0 (#5443) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update all non-major dependencies (#5445) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency rollup to ^2.11.2 (#5446) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore: Change Bootstrap v4.3.x to 4.5.x in README (#5447) Since v2.15 Bootstrap-Vue supports Bootstrap v4.5 * chore(deps): update all non-major dependencies (#5451) * chore(deps): update all non-major dependencies * Use `toBeEmptyDomElement()` instead of deprecated `toBeEmpty()` * Correct typo Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps): update devdependency vue-router to ^3.3.2 (#5454) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): remove unused `gh-pages` dependency (#5455) * chore(deps): update devdependency gh-pages to v3 * Remove `gh-pages` dependency Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps): update all non-major dependencies (#5458) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update all bootstrap doc links to latest version (#5450) Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps): update devdependency rollup to ^2.12.1 (#5463) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update all non-major dependencies (#5466) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency @nuxtjs/sitemap to ^2.3.1 (#5468) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency lint-staged to ^10.2.9 (#5470) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(b-avatar): convert line endings to Unix (#5469) Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore: convert all line endings to unix (#5474) * chore(deps): update all non-major dependencies (#5478) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update all non-major dependencies (#5482) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency eslint-plugin-import to ^2.21.2 (#5487) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency @testing-library/jest-dom to ^5.10.0 (#5493) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update all non-major dependencies (#5495) Co-authored-by: Renovate Bot <bot@renovateapp.com> * first attempt (#5462) Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps): update all non-major dependencies (#5499) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency eslint-plugin-prettier to ^3.1.4 (#5501) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency @nuxtjs/sitemap to ^2.3.2 (#5503) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency terser to ^4.8.0 (#5505) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update all non-major dependencies (#5508) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(docs): fix typo in sidebar README (#5494) (#5510) * chore: update auto format config (#5526) * chore(deps): update all non-major dependencies (#5511) Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps): update all non-major dependencies (#5531) Co-authored-by: Renovate Bot <bot@renovateapp.com> * fix typo (#5534) * remove mention of `router-tag` from button docs (#5535) Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * fix(b-table): prevent endless reevaluation when using v-model and object/array literal prop values (#5554) * Update devDependency sass-loader to v9 (#5546) Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * fix(b-img): Allow empty `alt` prop (fixes #5524) (#5545) * Allow empty `alt` * default to null to avoid check * remove unused import * add avatar support * add test cases * spelling Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps-dev): bump standard-version from 8.0.0 to 8.0.1 (#5576) Bumps [standard-version](https://github.com/conventional-changelog/standard-version) from 8.0.0 to 8.0.1. - [Release notes](https://github.com/conventional-changelog/standard-version/releases) - [Changelog](https://github.com/conventional-changelog/standard-version/blob/master/CHANGELOG.md) - [Commits](conventional-changelog/standard-version@v8.0.0...v8.0.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(b-form-tags): add `ignoreInputFocusSelector` prop to make input focus behavior configurable (closes #5425) (#5429) * fix(b-form-tags): fix input focus upon clicking on nested element * Update form-tags.js * Add `ignoreInputFocusSelector` prop * Update form-tags.js * Add comment and more selectors to ignoreInputFocusSelector in form-tags.js Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps): update all non-major dependencies (#5533) * chore(deps): update all non-major dependencies * Bump BundleWatch limits for new Bootstrap Icons * Regenerate icon files Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(docs): add an example to `<b-input-group>`'s using icons (#5537) * Adding an example to input-groups using icons * Update README.md Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps): update devdependency @nuxtjs/google-analytics to ^2.4.0 (#5583) Co-authored-by: Renovate Bot <bot@renovateapp.com> * fix(b-icon): use `aria-label` attribute instead of `alt` (#5581) * fix(b-tags): replace spacing utility with static CSS (fixes #5523) (#5544) * remove spacing utility * use mt-auto for better centering * update * add new class to avoid issues with custom rendering Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(docs): improve icons page (#5579) * feat(docs): improve icons page * Actually use `bootstrapIconsCount` variable * Move icon explorer to the bottom * chore: regenerate `yarn.lock` (#5585) * fix(b-form-tags): unit test (#5586) * chore(deps): update devdependency rollup to ^2.22.0 (#5589) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update all non-major dependencies (#5590) Co-authored-by: Renovate Bot <bot@renovateapp.com> * feat(docs): launch themes page with first BootstrapVue theme (#5549) * docs(footer): uncomment link for themes * docs(header): uncomment link for themes * docs(sidebar): uncomment link for themes * docs(intro/README): uncomment link for themes * docs(theming/README): uncomment link for themes * feature(themes): add first Bootstrap Vue & Creative Tim theme * style(themes): prettify themes files * fix(themes): solve typo * Use `@nuxt/content` for themes * Update index.vue * Update themes.vue * Don't pin `@nuxt/content` * Update themes.vue * Update themes.vue Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * fix: properly handle special characters in user-provided IDs (closes #4927, #5561) (#5564) * fix(b-form-group): make it work for ids with special characters like "/" Special characters are allowed in HTML5 (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) but need to be escaped when used in a selector for usage in e.g. "querySelector" Refs #5561 * Use own `cssEscape()` util + use/test everywhere needed Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(ci): update `actions/cache` to v2 (#5580) * chore(ci): update `actions/cache` to v2 * Update test.yml * Update test.yml * fix(b-form-tags): unit tests * Revert "fix(b-form-tags): unit tests" This reverts commit 20ebc04. * Split actions * Run BundleWatch during build * Update build.yml * Revert "Update build.yml" This reverts commit ed4ad3d. * Update build.yml * chore: replace `packagequality` badge with `codacy` in README (#5596) * chore: replace `packagequality` badge with `codacy` in README * Update README.md * chore(deps): update devdependency rollup to ^2.22.2 (#5597) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update devdependency rollup to ^2.23.0 (#5603) Co-authored-by: Renovate Bot <bot@renovateapp.com> * remove redundant height declaration in .b-sidebar (#5606) * chore(deps): update devdependency eslint-plugin-jest to ^23.18.2 (#5607) Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com> * chore(deps): update all non-major dependencies (#5609) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(docs): fix Bootstrap browser and devices link * chore(ci): fix BundleWatch token name * chore: add back `packagequality` badge to README * chore: prettify * chore: update contributors * chore(deps): update devdependency eslint-plugin-jest to ^23.19.0 (#5611) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore: add script to generate release notes (#5612) * chore: bump version to 2.16.0 and update changelog (#5614) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca> Co-authored-by: TitanFighter <bear_ukraine@bigmir.net> Co-authored-by: Hiws <rni@nova-c.dk> Co-authored-by: Vitaly Slobodin <vitaly_slobodin@fastmail.com> Co-authored-by: Sergey Skrynnikov <minotaar.hh@gmail.com> Co-authored-by: James George <jamesgeorge998001@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Paweł Tatarczuk <paweltatarczuk@gmail.com> Co-authored-by: Ivan Gonzalez <scratchmex@gmail.com> Co-authored-by: Hiws <hiws@live.dk> Co-authored-by: Nazare Emanuel-Ioan <emanuelioannazare@gmail.com> Co-authored-by: Dieter Geerts <dieter@dworks.be> Co-authored-by: michel milano <mmilano@users.noreply.github.com>
anyesu
added a commit
to anyesu/taro-demo
that referenced
this issue
Apr 23, 2024
- Teleport - https://vuejs.org/guide/built-ins/teleport.html - NervJS/taro#11751 (comment) - 节点 id 问题 - https://docs.taro.zone/docs/ref - NervJS/taro@2db9bdf#diff-d7ae218b39f54c0aed1ec3bd9d0a3e57347bf7df7583e0e354ba6d9630433acaR36-R43 - NervJS/taro#7317 (comment) - https://github.com/NervJS/taro/blob/v3.6.25/packages/taro-runtime/src/dom/node.ts#L23 - 获取页面根节点 - https://github.com/NervJS/taro/blob/v3.6.25/packages/taro-plugin-vue3/src/runtime/connect.ts#L88 - https://github.com/NervJS/taro/blob/v3.6.25/packages/taro-runtime/src/next-tick.ts#L21 - JSX - https://docs.taro.zone/docs/vue3#jsx - https://vuejs.org/api/general.html#function-signature - https://vuejs.org/guide/extras/render-function.html#typing-functional-components - CSS.escape - https://github.com/mathiasbynens/CSS.escape - bootstrap-vue/bootstrap-vue#5561 - facebook/react#28404 (comment)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
The
b-form-group
addsaria-describedby
to the input specified, and looks for it based on the givenlabel-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 thearia-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.Steps to reproduce the bug
Just use
/my-id
for example:See for a working example, and notice the console error, which makes the component "failing": https://codesandbox.io/s/serene-dewdney-ydnnu
Expected behavior
As 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.
Versions
Libraries:
Environment:
Demo link
Thx for the playground and export links, this really makes it easy to have min. reproductions.
https://codesandbox.io/s/serene-dewdney-ydnnu
Additional context
Like 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.The text was updated successfully, but these errors were encountered: