fix(ListGroup): do not sort when open and adding items

bpmn-io · Oct 8, 2021 · 70f29a1 · 70f29a1
1 parent dcebd1b
commit 70f29a1
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 5 deletions.
diff --git a/src/components/ListGroup.js b/src/components/ListGroup.js
@@ -75,14 +75,14 @@ export default function ListGroup(props) {
 
       let newOrdering = ordering;
 
-      // sort if configured
-      if (shouldSort) {
-        newOrdering = createOrdering(sortItems(items));
-      }
-
       // open if not open and configured
       if (!open && shouldOpen) {
         setOpen(true);
+
+        // if I opened and I should sort, then sort items
+        if (shouldSort) {
+          newOrdering = createOrdering(sortItems(items));
+        }
       }
 
       // add new items on top or bottom depending on sorting behavior

diff --git a/test/spec/components/ListGroup.spec.js b/test/spec/components/ListGroup.spec.js
@@ -554,6 +554,100 @@ describe('<ListGroup>', function() {
       });
 
 
+      it('should NOT sort when open on adding items', async function() {
+
+        // given
+        let items = [
+          {
+            id: 'item-1',
+            label: 'xyz'
+          },
+          {
+            id: 'item-2',
+            label: 'abc'
+          }
+        ];
+
+        const {
+          container,
+          rerender
+        } = createListGroup({ container: parentContainer, items });
+
+        const header = domQuery('.bio-properties-panel-group-header', container);
+
+        const list = domQuery('.bio-properties-panel-list', container);
+
+        // assume
+        // (1) open
+        waitFor(async () => {
+          await header.click();
+        });
+
+        expect(getListOrdering(list)).to.eql([
+          'item-2',
+          'item-1'
+        ]);
+
+        // (1) when
+        // add
+        items = [
+          ...items,
+          {
+            id: 'item-3',
+            label: 'foo'
+          }
+        ];
+
+        createListGroup({ items }, rerender);
+
+        // then
+        expect(getListOrdering(list)).to.eql([
+          'item-3',
+          'item-2',
+          'item-1'
+        ]);
+
+        // (2) when
+        // add
+        items = [
+          ...items,
+          {
+            id: 'item-4',
+            label: 'goo'
+          }
+        ];
+
+        createListGroup({ items }, rerender);
+
+        // then
+        expect(getListOrdering(list)).to.eql([
+          'item-4',
+          'item-3',
+          'item-2',
+          'item-1'
+        ]);
+
+
+        // (5) when
+        // close + open
+        waitFor(async () => {
+          await header.click();
+        });
+
+        waitFor(async () => {
+          await header.click();
+        });
+
+        // then
+        expect(getListOrdering(list)).to.eql([
+          'item-2',
+          'item-3',
+          'item-4',
+          'item-1'
+        ]);
+      });
+
+
       it('complex (open -> add -> change -> remove -> close -> open)', async function() {
 
         // given