Closed yrral86 closed 8 years ago
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 :)
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.
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.
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
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:
_selectedItemChanged
method after the item is changed http://jsbin.com/heposor/5/edit?html,outputI'd suggest the first option, mainly because it uses public properties, while the second relies on a protected method..
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.
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)
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.
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?
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.