ember-sortable: [2.2.0-beta.0] Modifiers: Breaks when items are loaded asynchronously

When using the new modifiers syntax, it seems to break with several errors being thrown if the array of items being sorted was loaded asynchronously.

I came across this bug when implementing a component that fetches its data outside of the normal route lifecycle.

After a small amount of debugging, I found that due to the data being fetched asynchronously, this line was returning an empty NodeList.

Since the sortable-group modifier is unaware of the items being used to render the sortable-item elements, it isn’t able to recognise that it needs to re-initialize itself.

Not really sure on the best approach for resolving this, any help would be appreciated 🙂

To Reproduce Steps to reproduce the behavior:

  1. Create a component that fetches data asynchronously
  2. Render the items using code similar to the below
  3. Attempt to reorder list of items
  4. Observe errors in console (errors attached at bottom of issue)
<ol {{sortable-group onChange=this.reorderItems}}>
  {{#each this.asyncFetchedItems as |item|}}
    <li {{sortable-item model=item}}>{{item.name}}</li>
  {{/each}}
</ol>

Expected behavior {{sortable-group}} modifier should be able to handle {{sortable-item}} elements being rendered asynchronously.

Additional context

Ember: v3.15.0
EmberCLI: v3.15.1
Node: v12.14.0

I’ve attached the errors that were thrown below,

sortable-item.js:370 Uncaught TypeError: Cannot read property 'prepare' of undefined
    at SortableItemModifier._startDrag (sortable-item.js:370)
    at SortableItemModifier._prepareDrag (sortable-item.js:335)
    at Backburner._run (backburner.js:1013)
    at Backburner._join (backburner.js:989)
    at Backburner.join (backburner.js:760)
    at join (index.js:179)
    at index.js:274
backburner.js:389 Uncaught Error: You attempted to schedule an action in a queue (actions) for a method that doesn't exist
    at DeferredActionQueues.schedule (backburner.js:389)
    at Backburner._scheduleExpiredTimers (backburner.js:1122)
    at Backburner._runExpiredTimers (backburner.js:1095)
sortable-item.js:595 Uncaught TypeError: Cannot read property 'update' of undefined
    at SortableItemModifier._drop (sortable-item.js:595)
    at sortable-item.js:362
    at Backburner._run (backburner.js:1013)
    at Backburner.run (backburner.js:754)
    at run (index.js:125)
    at drop (sortable-item.js:361)
backburner.js:389 Uncaught Error: You attempted to schedule an action in a queue (actions) for a method that doesn't exist
    at DeferredActionQueues.schedule (backburner.js:389)
    at Backburner._scheduleExpiredTimers (backburner.js:1122)
    at Backburner._runExpiredTimers (backburner.js:1095)

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 38 (32 by maintainers)

Most upvoted comments

They both do essentially the same thing, just one does it with a service to register where the other looks it up. It would be nice to get one of the merged. We should probably just go with the service one since that what more people seemed to want it to do

@ygongdev Is there anything that we can do to help get either of the above PRs merged?

PR https://github.com/adopted-ember-addons/ember-sortable/pull/355 was posted to fix this issue, then there was some concern on how it looked up items for PR https://github.com/adopted-ember-addons/ember-sortable/pull/361 was posted doing the same thing but using a service. Both these PRs do the same thing just in different ways. Could we get one of them approved (or feedback) and then will close the other. Thanks

@mike183 all good 😃 I meant to say that this PR only affects the modifier version of the addon and I don’t think there is support for < IE11. But I wasn’t able to confirm that with a quick search. If I remember correctly ember dropped support for < IE11 quite a while ago, but probably someone else has more reliable data on that.