#626 fix animation being removed when the subtree of a flow changes d…

…uring the animation (#632)

src/components/calcite-flow/calcite-flow.e2e.ts

@@ -58,6 +58,28 @@ describe("calcite-flow", () => {
     expect(frame).toHaveClass(CSS.frameAdvancing);
   });
 
+  it("frame advancing should add animation class when subtree is modified", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent("<calcite-flow><calcite-flow-item>flow1</calcite-flow-item></calcite-flow>");
+
+    const element = await page.find("calcite-flow");
+
+    element.innerHTML = `<calcite-flow-item>flow1</calcite-flow-item><calcite-flow-item id="flow2">flow2</calcite-flow-item>`;
+
+    await page.waitForChanges();
+
+    const item2 = await page.find(`calcite-flow-item[id=flow2]`);
+
+    item2.innerHTML = "new flow2 subtree content";
+
+    await page.waitForChanges();
+
+    const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
+
+    expect(frame).toHaveClass(CSS.frameAdvancing);
+  });
+
   it("frame retreating should add animation class", async () => {
     const page = await newE2EPage();
 

src/components/calcite-flow/calcite-flow.tsx

@@ -76,12 +76,6 @@ export class CalciteFlow {
   // --------------------------------------------------------------------------
 
   getFlowDirection = (oldFlowCount: number, newFlowCount: number): FlowDirection | null => {
-    const flowCountChanged = oldFlowCount !== newFlowCount;
-
-    if (!flowCountChanged) {
-      return null;
-    }
-
     const allowRetreatingDirection = oldFlowCount > 1;
     const allowAdvancingDirection = oldFlowCount && newFlowCount > 1;
 
@@ -102,7 +96,6 @@ export class CalciteFlow {
     const oldFlowCount = flows.length;
     const newFlowCount = newFlows.length;
 
-    const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
     const activeFlow = newFlows[newFlowCount - 1];
     const previousFlow = newFlows[newFlowCount - 2];
 
@@ -118,8 +111,12 @@ export class CalciteFlow {
     }
 
     this.flows = newFlows;
-    this.flowCount = newFlowCount;
-    this.flowDirection = flowDirection;
+
+    if (oldFlowCount !== newFlowCount) {
+      const flowDirection = this.getFlowDirection(oldFlowCount, newFlowCount);
+      this.flowCount = newFlowCount;
+      this.flowDirection = flowDirection;
+    }
   };
 
   flowItemObserver = new MutationObserver(this.updateFlowProps);