pushkar8723 / paper-dropdown

A wrapper for paper-dropdown-menu to enable various features like multi-select, search / filter of items, key value pair and 2-way binding on value.
https://paper-dropdown.netlify.com/#/elements/paper-dropdown
MIT License
16 stars 10 forks source link

Initial Values with multi dropdown #17

Open Arne2 opened 6 years ago

Arne2 commented 6 years ago

If I try to set initial values for a paper-dropdown with multi select it overwrites the values before the component is build up. that happens here. Possibly while executing super.ready().

<paper-dropdown label="Fruit" value='["apple", "orange"]' searchable="true" multi="true">
    <paper-item value="apple">Apple</paper-item>
    <paper-item value="banana">Banana</paper-item>
    <paper-item value="mango">Mango</paper-item>
    <paper-item value="orange">Orange</paper-item>
    <paper-item value="tomato">Tomato</paper-item>
</paper-dropdown>

Given that code no values are selected. This problem only occurs with multi-select.

rowe42 commented 6 years ago

In Multi-Mode obviously method _selectedItemsChanged sets 'value' to [], before method _updateSelected gets the chance to set selectedValues accordingly.

pushkar8723 commented 6 years ago

In multi mode component expect value to be array while the value supplied in this case is a string and so is overridden by empty array. I would suggest to do something similar to http://plnkr.co/edit/sJjxpsVaY8Y80MKYr0Cs?p=preview

rowe42 commented 6 years ago

Thanks for getting back to us so quickly! Actually in our real-world-example it does in fact look more like this:

<paper-dropdown 
                    class="testproject-TheBigEntity-field" 
                    id="TheBigEntity-field-id" 
                    label="the Label"
                    value="{{theValue}}"
                    searchable="true" multi="true"
                    > 
                            <paper-item value="item1">Item 1</paper-item>
                            <paper-item value="item2">Item 2</paper-item>
</paper-dropdown>
...
 static get properties() {
                return {
                    theValue: {
            type: Array,
            value() { return ['item1']; }
                    }
}

So, we do hand over an array, and not a string.

We are using Polymer 2, so our code looks a bit different from your Plunker-Example - where it does in fact work - however I cannot spot the difference to what we are doing... Maybe you know what we are doing wrong?

pushkar8723 commented 6 years ago

I am able to reproduce this issue version 2 onward. Polymer is behaving strangely around initializing a component with arrays even without paper-dropdown. I will update this thread as soon as I have something concrete.