Preserve and propagate dir to overlay and items (#879)

src/vaadin-combo-box-dropdown.html

@@ -52,6 +52,18 @@
         return 'vaadin-combo-box-overlay';
       }
 
+      connectedCallback() {
+        super.connectedCallback();
+
+        const dropdown = this.__dataHost;
+        const comboBoxOverlay = dropdown.getRootNode().host;
+        const comboBox = comboBoxOverlay && comboBoxOverlay.getRootNode().host;
+        const hostDir = comboBox && comboBox.getAttribute('dir');
+        if (hostDir) {
+          this.setAttribute('dir', hostDir);
+        }
+      }
+
       ready() {
         super.ready();
         const loader = document.createElement('div');

src/vaadin-combo-box-item.html

@@ -132,6 +132,11 @@
             this.$.content.appendChild(this._itemTemplateInstance.root);
           }
         }
+
+        const hostDir = this._comboBox.getAttribute('dir');
+        if (hostDir) {
+          this.setAttribute('dir', hostDir);
+        }
       }
 
       _render() {

test/item-template.html

@@ -121,6 +121,13 @@
         const content = firstItem.shadowRoot.querySelector('[part="content"]');
         expect(getComputedStyle(content).getPropertyValue('display')).to.equal('block');
       });
+
+      it('should preserve and propagate dir to the items', () => {
+        combobox.close();
+        combobox.setAttribute('dir', 'ltr');
+        combobox.open();
+        expect(firstItem.getAttribute('dir')).to.eql('ltr');
+      });
     });
   </script>
 

test/vaadin-combo-box.html

@@ -65,6 +65,17 @@
         });
       });
 
+      describe('Direction', () => {
+        it('should preserve and propagate dir to the dropdown overlay', () => {
+          comboBox.setAttribute('dir', 'ltr');
+          document.documentElement.setAttribute('dir', 'rtl');
+          comboBox.items = ['foo', 'bar'];
+          comboBox.open();
+          expect(comboBox.$.overlay.$.dropdown.$.overlay.getAttribute('dir')).to.eql('ltr');
+          document.documentElement.removeAttribute('dir');
+        });
+      });
+
       describe('items property', () => {
         it('should have undefined by default', () => {
           expect(comboBox.items).to.be.undefined;