Skip to content
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

[Autocomplete] Escape querySelector option value #2663

Open
wants to merge 3 commits into
base: 2.x
Choose a base branch
from

Conversation

Bartheyrman22
Copy link

@Bartheyrman22 Bartheyrman22 commented Mar 28, 2025

Properly escape the querySelector for option-values like "["Test"]"/
This to mitigate:

SyntaxError: Element.querySelector: ':scope > option[value="["foo"]"]' is not a valid selector
Q A
Bug fix? yes
New feature? no
Issues
License MIT

Some remark where I don't have a solution for:
The issue is only reproduceable on Chrome.
In Firefox, the code in the controller.js is not executed properly. So the error get's never triggered.
But no side effects detected so far.

This to correctly find values like "["test"]".
….querySelector: ':scope > option[value=[foo]]' is not a valid selector
@carsonbot carsonbot added Autocomplete Bug Bug Fix Status: Needs Review Needs to be reviewed labels Mar 28, 2025
Copy link

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

FileBefore (Size / Gzip)After (Size / Gzip)
Autocomplete
controller.js 16.71 kB / 3.97 kB 16.89 kB+1% 📈 / 4 kB+1% 📈

@Bartheyrman22
Copy link
Author

Should I worry about the 3 failed checks?
Thanks in advance!

@@ -325,6 +325,10 @@ export default class extends Controller {
return string.replace(/(<([^>]+)>)/gi, '');
}

#addSlashes(string: string): string {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I recently learned the existence of CSS.escape() Would it not be better than a custom implementation here ?

@@ -192,7 +192,7 @@ export default class extends Controller {
for (const [, tomSelectOption] of Object.entries(this.tomSelect.options)) {
if (tomSelectOption.$order === optionOrder) {
orderedOption = parentElement.querySelector(
`:scope > option[value="${tomSelectOption[this.tomSelect.settings.valueField]}"]`
`:scope > option[value="${[this.#addSlashes(this.tomSelect.settings.valueField)]}"]`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we sure here ? What is the goal of providing an array ?

@smnandre
Copy link
Member

In Firefox, the code in the controller.js is not executed properly.

Hello @Bartheyrman22 ... do you have a simple reproducer we can test to see what happens here ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants