Add failing test case for container width change

test-app/app/controllers/index.js

@@ -15,6 +15,8 @@ export default class ModifierController extends Controller {
     { fruit: 'lemon', day: 'Sunday' },
   ];
 
+  @tracked mutableRecords = ['Zero', 'One', 'Two', 'Three', 'Four'];
+
   @action handleDragChange(reordered) {
     this.records = reordered;
   }
@@ -76,4 +78,24 @@ export default class ModifierController extends Controller {
     set(this, 'model.itemsGrid2', newOrder);
     set(this, 'model.dragged', draggedModel);
   }
+
+  `@action`
+  updateMutable(newOrder, draggedModel) {
+    this.mutableRecords = newOrder;
+  }
+
+  @action
+  removeItemHorizontal(item) {
+    this.mutableRecords = this.mutableRecords.filter(
+      (record) => record !== item,
+    );
+  }
+
+  @action
+  addItemToHorizontal() {
+    this.mutableRecords = [
+      ...this.mutableRecords,
+      `Item ${this.mutableRecords.length + 1}`,
+    ];
+  }
 }

test-app/app/styles/app.css

@@ -295,3 +295,39 @@
 .word-break {
   word-wrap: break-word;
 }
+
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.mr-5 {
+  margin-right: 5px;
+}

test-app/app/templates/index.hbs

@@ -67,7 +67,50 @@
         {{~/each}}
       </ol>
     </section>
-
+
+    <section class='horizontal-demo'>
+      <h3 class='flex align-items-center'>Horizontal Mutable
+        &nbsp; &nbsp;<button type='button' {{on 'click' this.addItemToHorizontal}}>Add Item</button>
+      </h3>
+
+      <div class='flex align-items-center full-width'>
+        <ol
+          class='flex-1' data-test-horizontal-demo-group
+          {{sortable-group
+            direction='x'
+            onChange=this.updateMutable
+            itemVisualClass=this.itemVisualClass
+            handleVisualClass=this.handleVisualClass
+            groupName='horizontal-add-1'
+          }}
+        >
+          {{#each this.mutableRecords as |item|~}}
+            <li data-test-horizontal-demo-handle tabindex='0' {{sortable-item model=item groupName='horizontal-add-1'}}>
+              <ItemPresenter @item={{item}} />
+              <button type='button' {{on 'click' (fn this.removeItemHorizontal item)}}>x</button>
+            </li>
+          {{~/each}}
+        </ol>
+        <ol
+          data-test-horizontal-demo-group
+          {{sortable-group
+            direction='x'
+            onChange=this.updateMutable
+            itemVisualClass=this.itemVisualClass
+            handleVisualClass=this.handleVisualClass
+            groupName='horizontal-add-2'
+          }}>
+          {{#each this.mutableRecords as |item|~}}
+            <li data-test-horizontal-demo-handle tabindex='0' {{sortable-item model=item groupName='horizontal-add-2'}}>
+              <ItemPresenter @item={{item}} />
+              <button type='button' {{on 'click' (fn this.removeItemHorizontal item)}}>x
+              </button>
+            </li>
+          {{~/each}}
+        </ol>
+      </div>
+    </section>
+
     <section class="grid-demo">
       <div class="row">
         <div class="col">
@@ -77,13 +120,13 @@
       <div class="row">
         <div class="col">
           <div class="row" data-test-grid-demo-group
-          {{sortable-group
-            direction='grid'
-            onChange=this.updateGrid
-            itemVisualClass=this.itemVisualClass
-            handleVisualClass=this.handleVisualClass
-            groupName='grid'
-          }}>
+            {{sortable-group
+              direction='grid'
+              onChange=this.updateGrid
+              itemVisualClass=this.itemVisualClass
+              handleVisualClass=this.handleVisualClass
+              groupName='grid'
+            }}>
             {{#each @model.itemsGrid as |item|~}}
               <div class="col-120" data-test-grid-demo-handle tabindex='0' {{sortable-item model=item groupName='grid'}}>
                 <div class="card">
@@ -225,4 +268,4 @@
     </ol>
 
   </section>
-</article>
+</article>

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

@@ -125,6 +125,44 @@ module('Integration | Modifier | sortable-group', function (hooks) {
     assert.dom(announcerSelector).hasText('Cancelling item repositioning');
   });
 
+  test('firstItemPosition recomputes after external container layout changes', async function (assert) {
+    this.items = ['One', 'Two'];
+
+    this.update = (items) => {
+      set(this, 'items', items);
+    };
+
+    await render(hbs`
+      <div id="test-wrapper" style="display:flex;justify-content:center;width:700px;">
+        <ol
+          id="test-list"
+          style="display:block;white-space:nowrap;list-style:none;padding:0;margin:0;width:320px;"
+          {{sortable-group direction="x" onChange=this.update groupName="external-changes"}}
+        >
+          {{#each this.items as |item|}}
+            <li style="display:inline-block;width:80px;" {{sortable-item model=item groupName="external-changes"}}>
+              {{item}}
+            </li>
+          {{/each}}
+        </ol>
+      </div>
+    `);
+
+    const sortableService = this.owner.lookup('service:ember-sortable-internal-state');
+    const group = sortableService.fetchGroup('external-changes').groupModifier;
+
+    const firstPositionBeforeResize = group.firstItemPosition.x;
+    find('#test-wrapper').style.width = '500px';
+
+    group.items.forEach((item) => item.reset());
+    await settled();
+
+    const firstItem = group.items[0];
+    const expectedPositionAfterResize = firstItem.x - firstItem.spacing;
+    assert.equal(group.firstItemPosition.x, expectedPositionAfterResize);
+    assert.notEqual(group.firstItemPosition.x, firstPositionBeforeResize);
+  });
+
   function contents(selector) {
     return find(selector)
       .textContent.replace(/⇕/g, '')