fix(flow): process items on loaded (#11364)

Esri · Jan 23, 2025 · 93e5ff2 · 93e5ff2
1 parent 62b4902
commit 93e5ff2
Showing 1 changed file with 5 additions and 6 deletions.
diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx
@@ -33,9 +33,11 @@ export class Flow extends LitElement implements LoadableComponent {
   private frameEl: HTMLDivElement;
 
   private itemMutationObserver: MutationObserver = createObserver("mutation", () =>
-    this.handleMutationObserverChange(),
+    this.updateItemsAndProps(),
   );
 
+  private items: FlowItemLikeElement[] = [];
+
   private selectedIndex = -1;
 
   // #endregion
@@ -44,8 +46,6 @@ export class Flow extends LitElement implements LoadableComponent {
 
   @state() flowDirection: FlowDirection = "standby";
 
-  @state() items: FlowItemLikeElement[] = [];
-
   // #endregion
 
   // #region Public Properties
@@ -120,7 +120,6 @@ export class Flow extends LitElement implements LoadableComponent {
 
   override connectedCallback(): void {
     this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });
-    this.handleMutationObserverChange();
   }
 
   load(): void {
@@ -139,6 +138,7 @@ export class Flow extends LitElement implements LoadableComponent {
 
   loaded(): void {
     setComponentLoaded(this);
+    this.updateItemsAndProps();
   }
 
   override disconnectedCallback(): void {
@@ -194,7 +194,7 @@ export class Flow extends LitElement implements LoadableComponent {
     return newSelectedIndex < oldSelectedIndex ? "retreating" : "advancing";
   }
 
-  private handleMutationObserverChange(): void {
+  private updateItemsAndProps(): void {
     const { customItemSelectors, el } = this;
 
     const newItems = Array.from<FlowItemLikeElement>(
@@ -206,7 +206,6 @@ export class Flow extends LitElement implements LoadableComponent {
     this.items = newItems;
 
     this.ensureSelectedFlowItemExists();
-
     this.updateFlowProps();
   }