Merge pull request #131 from vaadin/fix/data-binding

Fix data-binding in selected item

src/vaadin-dropdown-menu.html

@@ -283,6 +283,15 @@
           const template = this.querySelector('template');
           this._overlayElement.template = template;
           if (this._overlayElement.content) {
+            const origForwardHostProp = this._overlayElement._instance && this._overlayElement._instance.forwardHostProp;
+
+            this._overlayElement._instance.forwardHostProp = (...args) => {
+              origForwardHostProp.apply(this._overlayElement._instance, args);
+              setTimeout(() => {
+                this._updateValueSlot();
+              });
+            };
+
             this._menuElement = Array.from(this._overlayElement.content.children).filter(element => element.localName !== 'style')[0];
 
             if (this._menuElement) {

test/dropdown-menu-test.html

@@ -238,6 +238,16 @@
         expect(menu.items[0].textContent.trim()).to.equal('foo');
       });
 
+      it('dropdown-menu should update selected item on host property changes', done => {
+        container.message = 'foo';
+        menu.selected = 0;
+        container.message = 'bar';
+        setTimeout(() => {
+          expect(dropdown._inputElement.querySelector('mock-item').textContent.trim()).to.equal('bar');
+          done();
+        });
+      });
+
       it('dropdown-menu should support two-way data binding', () => {
         const input = menu.items[1].querySelector('input');
         input.value = 'bar';