Escape text passed as display values to slim-select

netbox/project-static/package.json

@@ -30,6 +30,7 @@
     "dayjs": "^1.11.5",
     "flatpickr": "4.6.13",
     "gridstack": "^7.2.3",
+    "html-entities": "^2.3.3",
     "htmx.org": "^1.8.0",
     "just-debounce-it": "^3.1.1",
     "query-string": "^7.1.1",

netbox/project-static/src/select/api/apiSelect.ts

@@ -1,5 +1,6 @@
 import { readableColor } from 'color2k';
 import debounce from 'just-debounce-it';
+import { encode } from 'html-entities';
 import queryString from 'query-string';
 import SlimSelect from 'slim-select';
 import { createToast } from '../../bs';
@@ -446,7 +447,7 @@ export class APISelect {
     // Build SlimSelect options from all already-selected options.
     const preSelectedOptions = preSelected.map(option => ({
       value: option.value,
-      text: option.innerText,
+      text: encode(option.innerText),
       selected: true,
       disabled: false,
     })) as Option[];
@@ -454,7 +455,7 @@ export class APISelect {
     let options = [] as Option[];
 
     for (const result of data.results) {
-      let text = result.display;
+      let text = encode(result.display);
 
       if (typeof result._depth === 'number' && result._depth > 0) {
         // If the object has a `_depth` property, indent its display text.

netbox/project-static/yarn.lock

@@ -1818,6 +1818,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+html-entities@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
+  integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
+
 htmx.org@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/htmx.org/-/htmx.org-1.8.0.tgz#f3a2f681f3e2b6357b5a29bba24a2572a8e48fd3"