ISSUE-139957: fixing infinite loop caused by initing component to early

Author: marekpelc-pega

scripts/dxcomponents/components-manager.js

@@ -30,18 +30,23 @@ export class ComponentsManager {
 
     /**
      * Creates a component.
+     *
+     * Warning: We cannot init() component here because it may cause infinite loop.
+     * If we init() child before adding it to parent the following flow may occur:
+     * 1. Parent creates child (but does not add it to its children list yet)
+     * 2. Child init() is called
+     * 3. Parent is updated (because of redux store update)
+     * 4. Parent creates child again because its children list is empty.
+     * 5. Child init() is called again - and loops occurs.
+     *
      * @param type - type of component to create
      * @param args - arguments to pass to the component's constructor
      * @param init - if true, calls the component's init() method after creation
      * @returns the created component
      */
-    create(type, args = [], init = true) {
+    create(type, args = []) {
         const ComponentClass = getComponentFromMap(type);
-        const component = new ComponentClass(this, ...args);
-        if (init) {
-            component.init();
-        }
-        return component;
+        return new ComponentClass(this, ...args);
     }
 
     /**
@@ -52,12 +57,12 @@ export class ComponentsManager {
      * @param init - if true, calls the component's init() method after creation
      * @returns created or updated component
      */
-    upsert(component, type, args = [], init = true) {
+    upsert(component, type, args = []) {
         if (component) {
             component.update(...args);
             return component;
         } else {
-            return this.create(type, args, init);
+            return this.create(type, args);
         }
     }
 }

scripts/dxcomponents/components/containers/assignment-card.component.js

@@ -26,6 +26,7 @@ export class AssignmentCardComponent extends ContainerBaseComponent {
             this.arSecondaryButtons$,
             this.actionButtonClick,
         ]);
+        this.actionButtonsComponent.init();
         this.sendPropsUpdate();
     }
 

scripts/dxcomponents/components/containers/assignment.component.js

@@ -132,6 +132,7 @@ export class AssignmentComponent extends BaseComponent {
             "AssignmentCard",
             assignmentCardArgs
         );
+        this.assignmentCardComponent.init();
         this.loading = this.newPConn.getLoadingStatus();
         this.sendPropsUpdate();
     }

scripts/dxcomponents/components/containers/container-base.component.js

@@ -48,7 +48,7 @@ export class ContainerBaseComponent extends BaseComponent {
                 oldChildrenComponents.splice(oldChildrenComponents.indexOf(oldComponentToReuse), 1);
             } else {
                 const newPConn = newChild.getPConnect();
-                const newChildComponent = this.componentsManager.create(newPConn.meta.type, [newPConn], false);
+                const newChildComponent = this.componentsManager.create(newPConn.meta.type, [newPConn]);
                 reconciledComponents.push(newChildComponent);
                 uninitializedComponents.push(newChildComponent);
             }

scripts/dxcomponents/components/containers/flow-container.component.js

@@ -134,9 +134,11 @@ export class FlowContainerComponent extends BaseComponent {
                   ]
                 : [];
 
-        this.alertBannerComponents = banners.map((b) =>
-            this.componentsManager.create("AlertBanner", [b.variant, b.messages], true)
-        );
+        this.alertBannerComponents = banners.map((b) => {
+            const component = this.componentsManager.create("AlertBanner", [b.variant, b.messages]);
+            component.init();
+            return component;
+        });
     }
 
     #destroyBanners() {
@@ -171,6 +173,7 @@ export class FlowContainerComponent extends BaseComponent {
             this.childrenPConns,
             this.containerContextKey,
         ]);
+        this.assignmentComponent.init();
     }
 
     #updateSelf() {

scripts/dxcomponents/components/containers/modal-view-container.component.js

@@ -256,9 +256,11 @@ export class ModalViewContainerComponent extends ContainerBaseComponent {
                 ]
                 : [];
 
-        this.alertBannerComponents = banners.map((b) =>
-            this.componentsManager.create("AlertBanner", [b.variant, b.messages], true)
-        );
+        this.alertBannerComponents = banners.map((b) => {
+            const component = this.componentsManager.create("AlertBanner", [b.variant, b.messages]);
+            component.init();
+            return component;
+        });
     }
 
     #getBannerMessages() {

scripts/dxcomponents/components/containers/root-container.component.js

@@ -108,6 +108,7 @@ export class RootContainerComponent extends BaseComponent {
             viewContainerPConn.meta.type,
             [viewContainerPConn]
         );
+        this.#viewContainerComponent.init();
     }
 
     #configureModalContainer() {
@@ -127,6 +128,7 @@ export class RootContainerComponent extends BaseComponent {
             modalViewContainerPConn.meta.type,
             [modalViewContainerPConn]
         );
+        this.#modalViewContainerComponent.init();
         if (this.compId !== "1") {
             console.error(TAG, "RootComponent id must be '1' to match root container on consumer side");
             return;

scripts/dxcomponents/components/containers/templates/field-group-template.component.js

@@ -100,6 +100,7 @@ export class FieldGroupTemplateComponent extends BaseComponent {
                     evaluateAllowRowAction(allowRowEdit, item)
                 ).getPConnect();
                 const newComponent = this.componentsManager.upsert(oldComponent, newPConn.meta.type, [newPConn]);
+                newComponent.init();
                 updatedItems.push({
                     id: index,
                     name:

scripts/dxcomponents/components/containers/templates/simple-table.component.js

@@ -73,11 +73,13 @@ export class SimpleTableComponent extends BaseComponent {
                 this.pConn,
                 fieldGroupProps,
             ]);
+            this.childComponent.init();
             this.#sendPropsUpdate();
         } else if (fieldMetadata && fieldMetadata.type === 'Page List' && fieldMetadata.dataRetrievalType === 'refer') {
             console.warn(TAG, 'Displaying ListView in SimpleTable is not supported yet.');
         } else {
             this.childComponent = this.componentsManager.upsert(this.childComponent, "SimpleTableManual", [this.pConn]);
+            this.childComponent.init();
             this.#sendPropsUpdate();
         }
     }

scripts/dxcomponents/components/containers/view-container.component.js

@@ -94,6 +94,7 @@ export class ViewContainerComponent extends BaseComponent {
                 const viewPConn = ReferenceComponent.normalizePConn(newCompPConn);
                 this.childComponent?.destroy?.();
                 this.childComponent = this.componentsManager.create(viewPConn.meta.type, [viewPConn]);
+                this.childComponent.init();
                 this.props.children = [this.childComponent.compId];
                 this.componentsManager.onComponentPropsUpdate(this);
             }