-
-
Notifications
You must be signed in to change notification settings - Fork 348
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
base: 2.x
Are you sure you want to change the base?
Conversation
This to correctly find values like "["test"]".
….querySelector: ':scope > option[value=[foo]]' is not a valid selector
📊 Packages dist files size differenceThanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
|
Should I worry about the 3 failed checks? |
@@ -325,6 +325,10 @@ export default class extends Controller { | |||
return string.replace(/(<([^>]+)>)/gi, ''); | |||
} | |||
|
|||
#addSlashes(string: string): string { |
There was a problem hiding this comment.
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)]}"]` |
There was a problem hiding this comment.
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 ?
Hello @Bartheyrman22 ... do you have a simple reproducer we can test to see what happens here ? |
Properly escape the querySelector for option-values like "["Test"]"/
This to mitigate:
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.