array-selector doesn't work with multi unless toggle is specified

Problem 1

In the section regarding array-selector in the developer docs, it is unexplained the importance & relevance of toggle being set for the code snippet provided:

<dom-module id="employee-list">

  <template>

    <div> Employee list: </div>
    <template is="dom-repeat" id="employeeList" items="{{employees}}">
        <div>First name: <span>{{item.first}}</span></div>
        <div>Last name: <span>{{item.last}}</span></div>
        <button on-click="toggleSelection">Select</button>
    </template>

    <array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></array-selector>

    <div> Selected employees: </div>
    <template is="dom-repeat" items="{{selected}}">
        <div>First name: <span>{{item.first}}</span></div>
        <div>Last name: <span>{{item.last}}</span></div>
    </template>

  </template>

  <script>
    Polymer({
      is: 'employee-list',
      ready: function() {
        this.employees = [
            {first: 'Bob', last: 'Smith'},
            {first: 'Sally', last: 'Johnson'},
            ...
        ];
      },
      toggleSelection: function(e) {
        var item = this.$.employeeList.itemForElement(e.target);
        this.$.selector.select(item);
      }
    });
  </script>

</dom-module>

If toggle is removed, the element's behavior doesn't work as expected. I & many perhaps thought the removal of toggle means that that a selection canbe added to {{selected}} but not removed. Unfortunately, that isn't the case. This seems like a bug.

An example of this can be found here; remove toggle & see what happens.

Problem 2

Another problem beyond the problem(s) above is showing this.$.selector.select being used outside of an event handler. It was obvious to me inside things like the ready callback but there may be value if it was demonstrated the following ways for developers:

With filter &/or sort
Doing something with the selected contents when the element is detached
{{selected}} being used outside the app with an outside listener by the forsight of the code defining the property name put inside the selected attribute being available to the outside world with an event listner

I think the toggle example, at least, is a bug in array-selector; it doesn't seem to update the selection if toggle isn't set.

Fix incorrect test for `toggle`. Fixes #1810.

Changed this title to better describe the bug you're seeing in #1. Here's a jsbin using a fixed branch:

http://jsbin.com/guxijoyodi/1/edit

As you can see, select works properly without toggle, the only difference is that clicking the button a second time doesn't deselect the actor.

Not sure I really understand the questions in #2, but it seems like part of the problem is that the use cases for <array-selector> aren't described very well?

@arthurevans

@arthurevans The renamed title is accurate of the original meaning of the article, & the fixed branch has indeed the expected behavior I was expecting.

As I was originally expecting, select now works properly without toggle.

Regarding #2, I'd say you're spot-on, more examples or explanation of the array-selector may be warranted. This could be as simple as more examples showing how select(item) can work outside of event handlers.

Merge pull request #1841 from Polymer/array-selector

Navigation Menu

Repository navigation

array-selector doesn't work with `multi` unless `toggle` is specified #1810

Problem 1

Problem 2

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

array-selector doesn't work with multi unless toggle is specified #1810

Description

Problem 1

Problem 2

Activity

arthurevans commented on Jun 10, 2015

arthurevans commented on Jun 11, 2015

lozandier commented on Jun 11, 2015

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

array-selector doesn't work with `multi` unless `toggle` is specified #1810