From 6be7b731e664da551cae78bbe88f8541a2d6f7e4 Mon Sep 17 00:00:00 2001
From: Xon <635541+Xon@users.noreply.github.com>
Date: Sun, 22 Dec 2024 09:05:04 +0800
Subject: [PATCH] Fix HTML comments where copied from backing `<option>` values

---
 public/test/select-multiple/index.html   | 4 ++--
 public/test/select-one/index.html        | 4 ++--
 src/scripts/components/wrapped-select.ts | 2 +-
 test-e2e/tests/select-multiple.spec.ts   | 1 +
 test-e2e/tests/select-one.spec.ts        | 1 +
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/test/select-multiple/index.html b/public/test/select-multiple/index.html
index f04c130b..aac93c54 100644
--- a/public/test/select-multiple/index.html
+++ b/public/test/select-multiple/index.html
@@ -66,7 +66,7 @@ <h2>Select multiple inputs</h2>
             id="choices-basic"
             multiple
           >
-            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 1"><!-- html comment -->Choice 1</option>
             <option value="Choice 2">Choice 2</option>
             <option value="Find me">Choice 3</option>
             <option value="Choice 4">Choice 4</option>
@@ -74,7 +74,7 @@ <h2>Select multiple inputs</h2>
           <script>
             document.addEventListener('DOMContentLoaded', function() {
               const choicesBasic = new Choices('#choices-basic', {
-                allowHTML: true,
+                allowHTML: false,
               });
               document
                 .querySelector('button.disable')
diff --git a/public/test/select-one/index.html b/public/test/select-one/index.html
index 504db9ff..690fda08 100644
--- a/public/test/select-one/index.html
+++ b/public/test/select-one/index.html
@@ -61,7 +61,7 @@ <h2>Select one inputs</h2>
           <button class="disable push-bottom">Disable</button>
           <button class="enable push-bottom">Enable</button>
           <select class="form-control" name="choices-basic" id="choices-basic">
-            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 1"><!-- html comment -->Choice 1</option>
             <option value="Choice 2">Choice 2</option>
             <option value="Find me">Choice 3</option>
             <option value="Choice 4">Choice 4</option>
@@ -69,7 +69,7 @@ <h2>Select one inputs</h2>
           <script>
             document.addEventListener('DOMContentLoaded', function() {
               const choicesBasic = new Choices('#choices-basic', {
-                allowHTML: true,
+                allowHTML: false,
               });
               document
                 .querySelector('button.disable')
diff --git a/src/scripts/components/wrapped-select.ts b/src/scripts/components/wrapped-select.ts
index ff3d28b0..69be231d 100644
--- a/src/scripts/components/wrapped-select.ts
+++ b/src/scripts/components/wrapped-select.ts
@@ -81,7 +81,7 @@ export default class WrappedSelect extends WrappedElement<HTMLSelectElement> {
       score: 0,
       rank: 0,
       value: option.value,
-      label: option.innerHTML,
+      label: option.innerText, // HTML options do not support most html tags, but innerHtml will extract html comments...
       element: option,
       active: true,
       // this returns true if nothing is selected on initial load, which will break placeholder support
diff --git a/test-e2e/tests/select-multiple.spec.ts b/test-e2e/tests/select-multiple.spec.ts
index 3b4b4226..975df16a 100644
--- a/test-e2e/tests/select-multiple.spec.ts
+++ b/test-e2e/tests/select-multiple.spec.ts
@@ -45,6 +45,7 @@ describe(`Choices - select multiple`, () => {
 
           await suite.choices.first().click();
           await expect(suite.items.last()).toHaveText(selectedChoiceText);
+          await expect(suite.items.last()).not.toHaveText('!--');
         });
 
         test('remove selected choice from dropdown list', async ({ page, bundle }) => {
diff --git a/test-e2e/tests/select-one.spec.ts b/test-e2e/tests/select-one.spec.ts
index 0eee0127..17f52650 100644
--- a/test-e2e/tests/select-one.spec.ts
+++ b/test-e2e/tests/select-one.spec.ts
@@ -45,6 +45,7 @@ describe(`Choices - select one`, () => {
 
           await suite.choices.first().click();
           await expect(suite.items.last()).toHaveText(selectedChoiceText);
+          await expect(suite.items.last()).not.toHaveText('!--');
         });
 
         test('does not remove selected choice from dropdown list', async ({ page, bundle }) => {