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

Order of elements not updating on change items #14

Open
timur560 opened this issue Sep 7, 2017 · 4 comments
Open

Order of elements not updating on change items #14

timur560 opened this issue Sep 7, 2017 · 4 comments

Comments

@timur560
Copy link

timur560 commented Sep 7, 2017

Code:

<sortable-list class="items-sortable" on-sort-finish="_onSortFinish" dragging="{{dragging}}"
          sortable=".item" items="{{someItemsSorted}}">
  <template is="dom-repeat" items="[[itemsUpdatableFromApi]]">
    <div class="item"> ....
  ...
...

This issue is that when itemsUpdatableFromApi variable is changing, and the order of them changed, the order of items in component keep not changed. However, the data in items is updating correctly.

To clarify the issue I will describe steps:

  1. Items in sortable-list:
<div id="51">1</div>
<div id="52">2</div>
<div id="53">3</div>
  1. Move item with id 53 up:
<div id="51">1</div>
<div id="53">3</div>
<div id="52">2</div>
  1. Send API request on on-sort-finish to change the priorities (sort order)
  2. Update the items (in code above we just change the property itemsUpdatableFromApi with data, fetched from API)
<div id="51">1</div>
<div id="52">3</div>
<div id="53">2</div>

So, the id is changed and this is the correct data, but the order of displaying should be changed too. Because from API I receive items correctly ordered by priority (1,2,3)). But when I refresh the page, the order of items is correct:

<div id="51">1</div>
<div id="53">2</div>
<div id="52">3</div>
@robrez
Copy link

robrez commented Sep 13, 2017

it would be useful if the sort-finish event included the indices of the swapped elements, then the consumer would have an easy way to update the array used by a dom-repeat;

@RoXuS
Copy link

RoXuS commented Oct 5, 2017

+1 Same issue here

@RoXuS
Copy link

RoXuS commented Oct 5, 2017

@timur560 I made a fork which avoid the dom changes, so the issue is solved (only in this case of we use an API to apply the sort).
See RoXuS@555c68c.

On sort-finish event you have to apply the change on the array by using the new properties items from event ->

  _onSortFinish(event) {
    const myArray = [];
    event.detail.items.forEach((element, elementIndex) => {
...
  }

@davidmaxwaterman
Copy link

davidmaxwaterman commented May 23, 2018

This has been driving me up the wall (too). @RoXuS 's fork has shown me the way, but unfortunately I can't use it directly because it includes several modifications to the styling.
I was going to add a PR, but it seems there are several already that perhaps attempt the same thing, so I'll just add my fork here in case it is useful (same as RoXuS', but reverting some changes):
https://github.com/davidmaxwaterman/sortable-list

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

4 participants