Data-binding does not work in selected item

[tomalec]

Description

Data binding is broken when the option is selected. It updates values on the list, but not in the selection.

Live Demo

https://jsbin.com/rafumiv/2/edit?html,output

Steps to Reproduce

1. Create a fragment with
   • vaadin-dropdown-menu, with Polymer's binding (<vaadin-item>{{item}}</vaadin-item>) inside it,
   • bound an input element to the same value , with Polymer's binding (<input value="{{item}}">),
2. Append this fragment to a dom-bind or any Polymer element,
3. Pick the option.
4. Change the value

Expected Results

Value is updated in the dropdown

Actual Results

There is still the old value.

Browsers Affected

• Chrome
• Firefox
• Edge
• [?] Safari 9
• [?] Safari 8
• IE 11

Versions

• vaadin-dropdown-menu: https://github.com/vaadin/vaadin-dropdown-menu/tree/62eca8957aea266514b180564d87e7285874bf84 (master)
• webcomponents: https://github.com/webcomponents/webcomponentsjs/tree/a957286fa3cb157695cb82a1cdd9c822290f73d6(v1)

[platosha]

The reason is: the displayed value is a DOM clone of an actual item from the template instance.

Possible solution: intercept forwardHostProp invocation on the template instance and update the displayed clone.

const origForwardHostProp = dropdownMenu._overlayElement._instance.forwardHostProp;
dropdownMenu._overlayElement._instance.forwardHostProp = function() { 
  origForwardHostProp.apply(this, arguments);
  setTimeout(() => dropdownMenu._updateValueSlot());
};

[tomalec]

Are you suggesting it as a solution on a user level, or as something to be done by vaadin-dropdown-menu?

If it's a solution for user-land, then it's quite risky to rely on internal (_*) API to hack things around.

[platosha]

Something for the <vaadin-dropdown-menu>, of course.