Merge pull request #575 from mkszepp/fix-item-undefined

Fix error `TypeError: items[0] is undefined` in `sortable-item` modifier

Author: NullVoxPopuli

addon/src/modifiers/sortable-item.js

@@ -826,7 +826,7 @@ export default class SortableItemModifier extends Modifier {
    */
   get transitionDuration() {
     const items = this.sortableGroup.sortedItems.filter((x) => !x.isDragging && !x.isDropping);
-    let el = items[0].element ?? this.element; // Fallback when only one element is present in list
+    let el = items[0]?.element ?? this.element; // Fallback when only one element is present in list
     let rule = getComputedStyle(el).transitionDuration;
     let match = rule.match(/([\d.]+)([ms]*)/);
 

test-app/tests/integration/modifiers/sortable-item-test.js

@@ -0,0 +1,36 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { find, render } from '@ember/test-helpers';
+import { set } from '@ember/object';
+import { drag } from 'ember-sortable/test-support';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Modifier | sortable-item', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('Drag works with one item', async function (assert) {
+    this.items = ['Uno'];
+
+    this.update = (items) => {
+      set(this, 'items', items);
+    };
+
+    await render(hbs`
+      <ol id="test-list" {{sortable-group onChange=this.update}}>
+        {{#each this.items as |item|}}
+          <li data-test-item {{sortable-item model=item}}>{{item}}</li>
+        {{/each}}
+      </ol>
+    `);
+
+    await drag('mouse', '[data-test-item]', () => {
+      return { dy: 10 };
+    });
+
+    assert.equal(contents('#test-list'), 'Uno');
+  });
+
+  function contents(selector) {
+    return find(selector).textContent.replace(/⇕/g, '').replace(/\s+/g, ' ').replace(/^\s+/, '').replace(/\s+$/, '');
+  }
+});