Merge pull request #1990 from cardstack/CS-7729-fix-open-animation-wh…

…en-closing-card Fix opening animation when closing card
cardstack · Dec 30, 2024 · 77173b0 · 77173b0
2 parents 7dbbacd + 49352ae
commit 77173b0
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
@@ -253,8 +253,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
   }
 
   private closeItem = dropTask(async () => {
-    await this.startAnimation.perform('closing');
-    this.args.close(this.args.item);
+    await this.args.dismissStackedCardsAbove(this.args.index - 1);
   });
 
   @action private toggleSelect(cardDefOrId: CardDefOrId) {
@@ -523,10 +522,24 @@ export default class OperatorModeStackItem extends Component<Signature> {
       return;
     }
     const animations = this.itemEl.getAnimations() || [];
-    Promise.all(animations.map((animation) => animation.finished)).then(() => {
-      this.animationType = undefined;
-      resolve();
-    });
+    Promise.all(animations.map((animation) => animation.finished))
+      .then(() => {
+        this.animationType = undefined;
+        resolve();
+      })
+      .catch((e) => {
+        // AbortError is expected in two scenarios:
+        // 1. Multiple stack items are animating in parallel (eg. closing and moving forward)
+        //    and some elements get removed before their animations complete
+        // 2. Tests running with animation-duration: 0s can cause
+        //    animations to abort before they're properly tracked
+        if (e.name === 'AbortError') {
+          this.animationType = undefined;
+          resolve();
+        } else {
+          console.error(e);
+        }
+      });
   }
 
   private setupContentEl = (el: HTMLElement) => {

diff --git a/packages/host/tests/integration/components/operator-mode-test.gts b/packages/host/tests/integration/components/operator-mode-test.gts
@@ -972,6 +972,7 @@ module('Integration | operator-mode', function (hooks) {
       .includesText('Person');
 
     await click('[data-test-stack-card-index="1"] [data-test-close-button]');
+    await waitFor('[data-test-stack-card-index="1"]', { count: 0 });
     assert.dom(`[data-test-stack-card-index="1"]`).doesNotExist();
   });
 
@@ -1587,6 +1588,10 @@ module('Integration | operator-mode', function (hooks) {
     await click(`[data-test-search-sheet-cancel-button]`);
     await click(`[data-test-stack-card-index="1"] [data-test-close-button]`);
 
+    await waitUntil(
+      () => !document.querySelector('[data-test-stack-card-index="1"]'),
+    );
+
     await waitFor(`[data-test-cards-grid-item]`);
     await click(`[data-test-cards-grid-item="${testRealmURL}Person/burcu"]`);
     await waitFor(`[data-test-stack-card-index="1"]`);
@@ -3038,4 +3043,27 @@ module('Integration | operator-mode', function (hooks) {
       .dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`)
       .doesNotHaveClass('opening-animation');
   });
+
+  test('close card should not trigger opening animation again', async function (assert) {
+    await setCardInOperatorModeState(`${testRealmURL}grid`);
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template>
+          <OperatorMode @onClose={{noop}} />
+          <CardPrerender />
+        </template>
+      },
+    );
+    await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+
+    await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+    await waitFor(`[data-test-cards-grid-item]`);
+    await click(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"]`);
+    await click(`[data-test-stack-card-index="1"] [data-test-close-button]`);
+
+    await waitFor(`[data-test-stack-card-index="0"]`);
+    assert
+      .dom(`[data-test-stack-card-index="0"]`)
+      .doesNotHaveClass('opening-animation');
+  });
 });