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,12 @@ 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...
+      label:
+        // HTML options do not support most html tags, but innerHtml will extract html comments...
+        // <option label="..." /> innerText is full of whitespace
+        !option.innerText.trim() && option.hasAttribute('label')
+          ? option.getAttribute('label') || ''
+          : option.innerText,
       element: option,
       active: true,
       // this returns true if nothing is selected on initial load, which will break placeholder support