Fix incorrect style scope on selected item for initial value

vaadin · Feb 9, 2018 · d9fc92f · d9fc92f
1 parent a8f399d
commit d9fc92f
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 15 deletions.
diff --git a/src/vaadin-dropdown-menu.html b/src/vaadin-dropdown-menu.html
@@ -479,6 +479,35 @@
           }
         }
 
+        _hasContent(selected) {
+          if (!selected) {
+            return false;
+          }
+          return Boolean(
+            selected.hasAttribute('label') ?
+              selected.getAttribute('label') :
+              selected.textContent.trim() || selected.children.length
+          );
+        }
+
+        _attachSelectedItem(selected) {
+          if (!selected) {
+            return;
+          }
+          let labelItem;
+          if (selected.hasAttribute('label')) {
+            labelItem = document.createElement('vaadin-item');
+            labelItem.textContent = selected.getAttribute('label');
+            labelItem.selected = true;
+          } else {
+            labelItem = selected.cloneNode(true);
+          }
+
+          labelItem.removeAttribute('tabindex');
+
+          this._valueElement.appendChild(labelItem);
+        }
+
         _updateAriaExpanded(opened, toggleElement) {
           toggleElement && toggleElement.setAttribute('aria-expanded', opened);
         }
@@ -488,25 +517,19 @@
           this._valueElement.innerHTML = '';
 
           const selected = this._items[this._menuElement.selected];
-          let hasContent;
-          if (selected) {
-            let labelItem;
-            if (selected.hasAttribute('label')) {
-              hasContent = selected.getAttribute('label');
-              labelItem = document.createElement('vaadin-item');
-              labelItem.textContent = hasContent;
-              labelItem.selected = true;
-            } else {
-              hasContent = selected.textContent.trim() || selected.children.length;
-              labelItem = selected.cloneNode(true);
-            }
-            labelItem.removeAttribute('tabindex');
-            this._valueElement.appendChild(labelItem);
-          }
+
+          const hasContent = this._hasContent(selected);
 
           // Toggle visibility of _valueElement vs fallback input with placeholder
           this._valueElement.slot = hasContent ? 'value' : '';
 
+          // Ensure the slot distribution to apply correct style scope for cloned item
+          if (hasContent && window.ShadyDOM) {
+            window.ShadyDOM.flush();
+          }
+
+          this._attachSelectedItem(selected);
+
           if (!this._valueChanging) {
             this._selectedChanging = true;
             this.value = selected && selected.value || '';

diff --git a/test/dropdown-menu-test.html b/test/dropdown-menu-test.html
@@ -56,6 +56,19 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="style-scope">
+    <template>
+      <vaadin-dropdown-menu value="v1">
+        <template>
+          <vaadin-list-box>
+            <mock-item value="v1">t1</mock-item>
+            <mock-item value="v2">t2</mock-item>
+          </vaadin-list-box>
+        </template>
+      </vaadin-dropdown-menu>
+    </template>
+  </test-fixture>
+
   <test-fixture id="dropdown-in-flexbox">
     <template>
       <div style="display: flex; flex-direction: column; width:500px;">
@@ -131,6 +144,21 @@
       });
     });
 
+    describe('vaadin-dropdown-menu style scope', () => {
+      let dropdown, menu;
+
+      beforeEach(done => {
+        dropdown = fixture('style-scope');
+        menu = dropdown._menuElement;
+        Polymer.RenderStatus.afterNextRender(menu, () => setTimeout(done));
+      });
+
+      it('should not apply overlay style scope to the clone of selected item', () => {
+        const valueElement = dropdown._valueElement.firstChild;
+        expect(valueElement.classList.contains('vaadin-dropdown-menu-overlay')).to.be.false;
+      });
+    });
+
     describe('vaadin-dropdown-menu', () => {
       let dropdown, input;