Merge pull request #1289 from Choices-js/option-label-attribute

Support `<option>` label attribute

Author: Xon

public/test/select-multiple/index.html

@@ -67,7 +67,7 @@ <h2>Select multiple inputs</h2>
             multiple
           >
             <option value="Choice 1"><!-- html comment -->Choice 1</option>
-            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 2" label="Choice 2" />
             <option value="Find me">Choice 3</option>
             <option value="Choice 4">Choice 4</option>
           </select>

public/test/select-one/index.html

@@ -62,7 +62,7 @@ <h2>Select one inputs</h2>
           <button class="enable push-bottom">Enable</button>
           <select class="form-control" name="choices-basic" id="choices-basic">
             <option value="Choice 1"><!-- html comment -->Choice 1</option>
-            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 2" label="Choice 2" />
             <option value="Find me">Choice 3</option>
             <option value="Choice 4">Choice 4</option>
           </select>

src/scripts/components/wrapped-select.ts

@@ -81,7 +81,9 @@ export default class WrappedSelect extends WrappedElement<HTMLSelectElement> {
       score: 0,
       rank: 0,
       value: option.value,
-      label: option.innerText, // HTML options do not support most html tags, but innerHtml will extract html comments...
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
+      // This attribute is text for the label indicating the meaning of the option. If the `label` attribute isn't defined, its value is that of the element text content (ie `innerText`).
+      label: option.label,
       element: option,
       active: true,
       // this returns true if nothing is selected on initial load, which will break placeholder support

test/scripts/components/wrapped-select.test.ts

@@ -20,7 +20,11 @@ describe('components/wrappedSelect', () => {
         option.innerHTML = 'Placeholder label';
       } else {
         option.value = `Value ${i}`;
-        option.innerHTML = `Label ${i}`;
+        if (i % 2 === 0) {
+          option.innerHTML = `Label ${i}`;
+        } else {
+          option.label = `Label ${i}`;
+        }
       }
 
       if (i === 1) {