paper-dropdown-menu doesn't update its label if the selected paper-item value is changed

[yrral86]

This is the same as the issue described here: https://github.com/Polymer/paper-dropdown-menu/issues/31

I am still seeing the behavior in the latest version (1.2.1), and the workaround on the old ticket no longer works without setting the specified property to readOnly: false. This is a blocker for me, so if someone can point me in the right direction I can try to make a PR.

[valdrinkoshi]

Hi @yrral86, you can change the selected property, it will update properly the paper-dropdown-menu http://jsbin.com/mecaqu/1/edit?html,output Closing this, if the problem is another please provide a jsbin showing the issue, will re-open it if needed :)

[yrral86]

I suppose I didn't explain that very well. I have modified the example to illustrate the issue: http://jsbin.com/rebacoleya/edit?html,output

Essentially, the underlying collection is changed programmatically. If you open the dropdown, the list is correctly updated. However, label showing is incorrect and you can not select the correct item since it is already selected. The only way to get the correct label is to select something else and then reselect the original item.

[yrral86]

FYI, for now I have worked around this by copying paper-dropdown-menu, setting selectedItemLabel to not be read only, and then in my component I have this:

this._dropdownInterval = setInterval(function() {
                    if (this.$.dropdown.selectedItem) {
                        this.$.dropdown.selectedItemLabel = this.$.dropdown.selectedItem.textContent.trim();
                    }
                }.bind(this), 100);

But, obviously I would like to be able to remove this hack and get back to a standard paper-dropdown-menu.

[valdrinkoshi]

Oh, now i see! Thanks for the clarification. Another option (for now) is to change the selected value of paper-listbox and set it back to what it was: http://jsbin.com/heposor/3/edit?html,output Re-opening this

[valdrinkoshi]

The problem is that paper-dropdown-menu updates the internal paper-input value if the selection change, but cannot really observe changes of the value of the selected item. Since in this case the selection is not changing, the only things I can think of are:

• forcing the selection to change and reset it back http://jsbin.com/heposor/3/edit?html,output
• invoke _selectedItemChanged method after the item is changed http://jsbin.com/heposor/5/edit?html,output

I'd suggest the first option, mainly because it uses public properties, while the second relies on a protected method..

[yrral86]

My concern with the first option is that our list is dynamic and could potentially only contain only one item. I'm guessing incrementing selectedItem past the end of the list is a bad idea. I can try to call _selectedItemChanged. Hopefully I can hook up a proper observer instead of just using a timer. Unfortunately the property that drives the list is actually being modified in a different component and is being passed through a few components via data binding.

[valdrinkoshi]

You could set selected = undefined and then to the old value as well. undefined or null are valid value for selected (it is no selection)

[valdrinkoshi]

The suggestion would be to force the selection change by setting:

// After updating the items
var selected = menu.selected;
// Force selection change to update the menu value.
menu.selected = undefined;
menu.selected = selected;

Here the jsbin: http://jsbin.com/heposor/6/edit?html,output

Having a method like forceSelectedUpdate() wouldn't be much different that forcing it directly.

Making selectedItemLabel writeable would cause issues in synchronizing it when the selection changes, and cause weird behavior if you bind it. I believe selected was introduced for these reasons.

Closing this as solution is provided.

[davidmaxwaterman]

this workaround doesn't work for me :/ my example is slightly different in that I'm changing the entire items array :

http://jsbin.com/qototolula/edit?html,output

Is there a similar work-around to the problem expressed in the above jsbin?

[mvtorres]

The workaround here worked for me when changing array/items