Fix issues related to IE11 compatibility (#259)

sick-sad-world · bennybennett · commit 33dd4e83fccb · 2020-01-02T10:22:00.000-05:00
* Fix issues related to IE11 compatibility

* Fix issues related to IE11 compatibility

* Add coverage to tests

* Add more coverage

* Try to fix documentation, Ensure that all examples have different ID's
diff --git a/docs/html/dropdown/dropdown--compact.html b/docs/html/dropdown/dropdown--compact.html
@@ -1,12 +1,12 @@
 <div class="ray-dropdown ray-dropdown--compact">
   <div class="ray-dropdown__wrapper">
-    <select class="ray-dropdown__input" id="test">
+    <select class="ray-dropdown__input" id="test-compact">
       <option value="Pikachu">Pikachu</option>
       <option value="Squirtle">Squirtle</option>
       <option value="Squirtle">Charmander</option>
     </select>
   </div>
-  <label class="ray-dropdown__label">
+  <label class="ray-dropdown__label" for="test-compact">
     What's your favorite Pokémon?
   </label>
 </div>
diff --git a/docs/html/dropdown/dropdown--error.html b/docs/html/dropdown/dropdown--error.html
@@ -1,11 +1,11 @@
 <div class="ray-dropdown ray-dropdown--error">
   <div class="ray-dropdown__wrapper">
-    <select class="ray-dropdown__input" id="test">
+    <select class="ray-dropdown__input" id="test-error">
       <option value="Pikachu">Pikachu</option>
       <option value="Squirtle">Squirtle</option>
       <option value="Squirtle">Charmander</option>
     </select>
-    <label class="ray-dropdown__label">
+    <label class="ray-dropdown__label" for="test-error">
       What's your favorite Pokémon?
     </label>
   </div>
diff --git a/docs/html/dropdown/dropdown--optgroups.html b/docs/html/dropdown/dropdown--optgroups.html
@@ -1,6 +1,6 @@
 <div class="ray-dropdown">
   <div class="ray-dropdown__wrapper">
-    <select class="ray-dropdown__input" id="test-example" value="">
+    <select class="ray-dropdown__input" id="test-optgroups" value="">
       <optgroup label="Ash">
         <option value="Pikachu">Pikachu</option>
         <option value="Charmander">Charmander</option>
@@ -17,7 +17,7 @@
       </optgroup>
     </select>
   </div>
-  <label class="ray-dropdown__label" for="test-example">
+  <label class="ray-dropdown__label" for="test-optgroups">
     Pokemon
   </label>
 </div>
diff --git a/docs/html/dropdown/dropdown--with-icon.html b/docs/html/dropdown/dropdown--with-icon.html
@@ -3,8 +3,7 @@
   <div class="ray-dropdown__wrapper">
     <select
       class="ray-dropdown__input"
-      id="test-example"
-      value=""
+      id="test-icon"
       required
       aria-required="true"
     >
@@ -19,7 +18,7 @@
       <option value="Sonichu">Sonichu</option>
     </select>
   </div>
-  <label class="ray-dropdown__label" for="test-example">
+  <label class="ray-dropdown__label" for="test-icon">
     Pokemon
   </label>
 </div>
diff --git a/docs/html/dropdown/dropdown--with-placeholder.html b/docs/html/dropdown/dropdown--with-placeholder.html
@@ -1,6 +1,6 @@
 <div class="ray-dropdown">
   <div class="ray-dropdown__wrapper">
-    <select class="ray-dropdown__input" id="test-example" value="">
+    <select class="ray-dropdown__input" id="test-placeholder" value="">
       <option value="" data-ray-placeholder>
         Choose pokemon?
       </option>
@@ -13,7 +13,7 @@
       <option value="Sonichu">Sonichu</option>
     </select>
   </div>
-  <label class="ray-dropdown__label" for="test-example">
+  <label class="ray-dropdown__label" for="test-placeholder">
     Pokemon
   </label>
 </div>
diff --git a/docs/html/dropdown/dropdown--with-prepend.html b/docs/html/dropdown/dropdown--with-prepend.html
@@ -5,7 +5,7 @@
   <div class="ray-dropdown__wrapper">
     <select
       class="ray-dropdown__input"
-      id="test-example"
+      id="test-prepend"
       value=""
       required
       aria-required="true"
@@ -20,7 +20,7 @@
       <option value="Charmander">Charmander</option>
       <option value="Sonichu">Sonichu</option>
     </select>
-    <label class="ray-dropdown__label" for="test-example">
+    <label class="ray-dropdown__label" for="test-prepend">
       Pokemon
     </label>
   </div>
diff --git a/docs/html/dropdown/dropdown.html b/docs/html/dropdown/dropdown.html
@@ -6,7 +6,7 @@
       <option value="Squirtle">Charmander</option>
     </select>
   </div>
-  <label class="ray-dropdown__label">
+  <label class="ray-dropdown__label" for="test">
     What's your favorite Pokémon?
   </label>
 </div>
diff --git a/docs/html/dropdown/rtl-dropdown--compact.html b/docs/html/dropdown/rtl-dropdown--compact.html
@@ -1,13 +1,13 @@
 <div dir="rtl">
   <div class="ray-dropdown ray-dropdown--compact">
     <div class="ray-dropdown__wrapper">
-      <select class="ray-dropdown__input" id="test">
+      <select class="ray-dropdown__input" id="rtl-test-compact">
         <option value="Pikachu">Pikachu</option>
         <option value="Squirtle">Squirtle</option>
         <option value="Squirtle">Charmander</option>
       </select>
     </div>
-    <label class="ray-dropdown__label">
+    <label class="ray-dropdown__label" for="rtl-test-compact">
       What's your favorite Pokémon?
     </label>
   </div>
diff --git a/docs/html/dropdown/rtl-dropdown--error.html b/docs/html/dropdown/rtl-dropdown--error.html
@@ -1,13 +1,13 @@
 <div dir="rtl">
   <div class="ray-dropdown ray-dropdown--error">
     <div class="ray-dropdown__wrapper">
-      <select class="ray-dropdown__input" id="test">
+      <select class="ray-dropdown__input" id="rtl-test-error">
         <option value="Pikachu">Pikachu</option>
         <option value="Squirtle">Squirtle</option>
         <option value="Squirtle">Charmander</option>
       </select>
     </div>
-    <label class="ray-dropdown__label">
+    <label class="ray-dropdown__label" for="rtl-test-error">
       What's your favorite Pokémon?
     </label>
   </div>
diff --git a/docs/html/dropdown/rtl-dropdown--optgroups.html b/docs/html/dropdown/rtl-dropdown--optgroups.html
@@ -1,7 +1,7 @@
 <div dir="rtl">
   <div class="ray-dropdown">
     <div class="ray-dropdown__wrapper">
-      <select class="ray-dropdown__input" id="test-example" value="">
+      <select class="ray-dropdown__input" id="rtl-test-groups" value="">
         <optgroup label="Ash">
           <option value="Pikachu">Pikachu</option>
           <option value="Charmander">Charmander</option>
@@ -18,7 +18,7 @@
         </optgroup>
       </select>
     </div>
-    <label class="ray-dropdown__label" for="test-example">
+    <label class="ray-dropdown__label" for="rtl-test-groups">
       Pokemon
     </label>
   </div>
diff --git a/docs/html/dropdown/rtl-dropdown--with-icon.html b/docs/html/dropdown/rtl-dropdown--with-icon.html
@@ -4,8 +4,7 @@
     <div class="ray-dropdown__wrapper">
       <select
         class="ray-dropdown__input"
-        id="test-example"
-        value=""
+        id="rtl-test-icon"
         required
         aria-required="true"
       >
@@ -20,7 +19,7 @@
         <option value="Sonichu">Sonichu</option>
       </select>
     </div>
-    <label class="ray-dropdown__label" for="test-example">
+    <label class="ray-dropdown__label" for="rtl-test-icon">
       Pokemon
     </label>
   </div>
diff --git a/docs/html/dropdown/rtl-dropdown--with-placeholder.html b/docs/html/dropdown/rtl-dropdown--with-placeholder.html
@@ -1,7 +1,7 @@
 <div dir="rtl">
   <div class="ray-dropdown">
     <div class="ray-dropdown__wrapper">
-      <select class="ray-dropdown__input" id="test-example" value="">
+      <select class="ray-dropdown__input" id="rtl-test-placeholder" value="">
         <option value="" data-ray-placeholder>
           Choose pokemon?
         </option>
@@ -15,7 +15,7 @@
         <option value="Sonichu">Sonichu</option>
       </select>
     </div>
-    <label class="ray-dropdown__label" for="test-example">
+    <label class="ray-dropdown__label" for="rtl-test-placeholder">
       Pokemon
     </label>
   </div>
diff --git a/docs/html/dropdown/rtl-dropdown.html b/docs/html/dropdown/rtl-dropdown.html
@@ -1,13 +1,13 @@
 <div dir="rtl">
   <div class="ray-dropdown">
     <div class="ray-dropdown__wrapper">
-      <select class="ray-dropdown__input" id="test">
+      <select class="ray-dropdown__input" id="rtl-test">
         <option value="Pikachu">Pikachu</option>
         <option value="Squirtle">Squirtle</option>
         <option value="Squirtle">Charmander</option>
       </select>
     </div>
-    <label class="ray-dropdown__label">
+    <label class="ray-dropdown__label" for="rtl-test">
       What's your favorite Pokémon?
     </label>
   </div>
diff --git a/docs/html/dropdown/rtl-dropdwon--with-prepend.html b/docs/html/dropdown/rtl-dropdwon--with-prepend.html
@@ -6,7 +6,7 @@
     <div class="ray-dropdown__wrapper">
       <select
         class="ray-dropdown__input"
-        id="test-example"
+        id="rtl-test-prepend"
         value=""
         required
         aria-required="true"
@@ -21,7 +21,7 @@
         <option value="Charmander">Charmander</option>
         <option value="Sonichu">Sonichu</option>
       </select>
-      <label class="ray-dropdown__label" for="test-example">
+      <label class="ray-dropdown__label" for="rtl-test-prepend">
         Pokemon
       </label>
     </div>
diff --git a/packages/core/src/components/dropdown/constants.js b/packages/core/src/components/dropdown/constants.js
@@ -41,18 +41,17 @@ export const SELECTORS = {
   placeholder: `.${ROOT}__option--placeholder`
 };
 
-export const bodyTpl = ({ value, clear }) => {
+export const bodyTpl = ({ value }) => {
   return {
     position: 'beforebegin',
     tpl: `
       <div class="${CLASSNAMES.body}" tabindex="0">
         <div class="${CLASSNAMES.selected}">
           <span class="${CLASSNAMES.selectedValue}">${value}</span>
-          ${clear ? `<span class="${CLASSNAMES.clear}">×</span>` : ''}
         </div>
       </div>
     `,
-    elements: ['body', 'selectedValue', 'clear']
+    elements: ['body', 'selectedValue']
   };
 };
 
diff --git a/packages/core/src/components/dropdown/index.js b/packages/core/src/components/dropdown/index.js
@@ -26,9 +26,9 @@ function tryAndPass(cond, str) {
 }
 
 function htmlToElement(html) {
-  const template = document.createElement('template');
+  const template = document.createElement('div');
   template.innerHTML = html.trim();
-  return template.content.firstChild;
+  return template.firstChild;
 }
 
 function wrap(el, wrapper) {
@@ -196,9 +196,17 @@ class Dropdown {
 
   _setSelectedLabel() {
     const { renderSelected } = this.settings;
-    this._selectedValue.innerHTML = isFunc(renderSelected)
-      ? renderSelected(this._selectedOption)
-      : this._selectedOption.innerHTML;
+    if (
+      this._selectedOption > 0 ||
+      this._selectedOption === undefined ||
+      this._value === ''
+    ) {
+      this._selectedValue.innerHTML = '';
+    } else {
+      this._selectedValue.innerHTML = isFunc(renderSelected)
+        ? renderSelected(this._selectedOption)
+        : this._selectedOption.innerHTML;
+    }
   }
 
   _processLabel() {
@@ -352,8 +360,9 @@ class Dropdown {
 
   onOptionClick(plugin) {
     return function onClickListener() {
-      if (this.hasAttribute('disabled') || !this.dataset.rayIdx) return;
-      plugin._value = plugin._options[this.dataset.rayIdx].value; //eslint-disable-line
+      if (!this.hasAttribute('disabled') && this.dataset.rayIdx) {
+        plugin._value = plugin._options[this.dataset.rayIdx].value; //eslint-disable-line
+      }
     };
   }
 
diff --git a/packages/core/test/components/dropdown.test.js b/packages/core/test/components/dropdown.test.js
@@ -101,6 +101,18 @@ describe('Select', () => {
     select.destroy();
   });
 
+  test('If for some reason selected index undefined or negative should not render selected option', () => {
+    const { select, selectEl } = setupTest();
+
+    selectEl.querySelector('select').selectedIndex = -1;
+    select.set('');
+    expect(
+      selectEl.querySelector('.ray-dropdown__selected-value').innerHTML
+    ).toEqual('');
+
+    select.destroy();
+  });
+
   test('#enable makes select active again', () => {
     const { select, selectEl } = setupTest();
 
diff --git a/packages/core/test/fixtures/dropdown/index.js b/packages/core/test/fixtures/dropdown/index.js
@@ -6,7 +6,7 @@ export function dropdownFixture() {
       <div class="ray-dropdown__wrapper">
         <select class="ray-dropdown__input" id="test">
           <option value="" data-ray-placeholder></option>
-          <option value="Pikachu">Pikachu</option>
+          <option selected value="Pikachu">Pikachu</option>
           <option value="Squirtle">Squirtle</option>
           <option value="Charmander">Charmander</option>
         </select>
