Merge pull request #1244 from Choices-js/fix-html-comments-in-option

Fix HTML comments were copied from backing `<option>` value and were rendered as text

Author: Xon

public/test/select-multiple/index.html

@@ -66,15 +66,15 @@ <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>
           </select>
           <script>
             document.addEventListener('DOMContentLoaded', function() {
               const choicesBasic = new Choices('#choices-basic', {
-                allowHTML: true,
+                allowHTML: false,
               });
               document
                 .querySelector('button.disable')

public/test/select-one/index.html

@@ -61,15 +61,15 @@ <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>
           </select>
           <script>
             document.addEventListener('DOMContentLoaded', function() {
               const choicesBasic = new Choices('#choices-basic', {
-                allowHTML: true,
+                allowHTML: false,
               });
               document
                 .querySelector('button.disable')

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

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 }) => {

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 }) => {