Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lozandier opened this issue Jun 9, 2015 · 3 comments
Closed

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

lozandier opened this issue Jun 9, 2015 · 3 comments
Assignees

Comments

@lozandier
Copy link

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
@arthurevans
Copy link

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.

@arthurevans arthurevans changed the title Missing documentation details regarding array-selector: The importance of toggle is explained, its consequences of being removed within dom-repeat listeners attempting to add things to {{selected}}, & more (Developer Docs) array-selector doesn't work with multi unless toggle is specified Jun 11, 2015
@arthurevans
Copy link

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?

@lozandier
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants