[Autocomplete] Escape querySelector option value

src/Autocomplete/assets/dist/controller.js

@@ -1,35 +1,35 @@
 import { Controller } from '@hotwired/stimulus';
 import TomSelect from 'tom-select';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeObjects, _default_1_createTomSelect;
+var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_addSlashes, _default_1_mergeObjects, _default_1_createTomSelect;
 class default_1 extends Controller {
     constructor() {
         super(...arguments);
@@ -270,7 +270,7 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
             let orderedOption = null;
             for (const [, tomSelectOption] of Object.entries(this.tomSelect.options)) {
                 if (tomSelectOption.$order === optionOrder) {
-                    orderedOption = parentElement.querySelector(`:scope > option[value="${tomSelectOption[this.tomSelect.settings.valueField]}"]`);
+                    orderedOption = parentElement.querySelector(`:scope > option[value="${[__classPrivateFieldGet(this, _default_1_instances, "m", _default_1_addSlashes).call(this, this.tomSelect.settings.valueField)]}"]`);
                     break;
                 }
             }
@@ -364,6 +364,8 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
     return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
 }, _default_1_stripTags = function _default_1_stripTags(string) {
     return string.replace(/(<([^>]+)>)/gi, '');
+}, _default_1_addSlashes = function _default_1_addSlashes(string) {
+    return string.replace(/["\\]/g, '\\$&');
 }, _default_1_mergeObjects = function _default_1_mergeObjects(object1, object2) {
     return { ...object1, ...object2 };
 }, _default_1_createTomSelect = function _default_1_createTomSelect(options) {

src/Autocomplete/assets/src/controller.ts

@@ -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)]}"]`
                         );
 
                         break;
@@ -325,6 +325,10 @@ export default class extends Controller {
         return string.replace(/(<([^>]+)>)/gi, '');
     }
 
+    #addSlashes(string: string): string {
+        return string.replace(/["\\]/g, '\\$&');
+    }
+
     #mergeObjects(object1: any, object2: any): any {
         return { ...object1, ...object2 };
     }