Merge pull request #1088 from Esri/handle-delayed-init

Changed initialization of types to support changes in accordion values
Esri · Jan 9, 2025 · 0be077e · 0be077e
2 parents 48c611c + 267b33f
commit 0be077e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 26 deletions.
diff --git a/src/components/solution-item-accordion/solution-item-accordion.tsx b/src/components/solution-item-accordion/solution-item-accordion.tsx
@@ -110,12 +110,6 @@ export class SolutionItemAccordion {
     "Group"
   ];
 
-  /**
-   * string[]: Array of template types.
-   * This array is used during render to ensure only one Accordion item is added for each type.
-   */
-  protected _types: string[] = [];
-
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -134,7 +128,6 @@ export class SolutionItemAccordion {
 
   @Watch("templateInfos")
   async templateInfosWatchHandler(): Promise<void> {
-    this._types = [];
     this._sortedTemplateInfos = this._sortTemplates();
   }
 
@@ -160,18 +153,10 @@ export class SolutionItemAccordion {
    * StencilJS: Called once just after the component is first connected to the DOM.
    */
   async componentWillLoad(): Promise<void> {
+    this._sortedTemplateInfos = this._sortTemplates();
     await this._getTranslations();
   }
 
-  /**
-   * StencilJS: Called before each render
-   */
-  async componentWillRender(): Promise<void> {
-    if (this._sortedTemplateInfos.length === 0 && this.templateInfos?.length > 0) {
-      this._sortedTemplateInfos = this._sortTemplates();
-    }
-  }
-
   /**
    * Renders the component.
    */
@@ -197,17 +182,21 @@ export class SolutionItemAccordion {
    * @protected
    */
   protected _getAccordion(): VNode {
+    const types: string[] = [];
+    const accordion = this._sortedTemplateInfos.reduce((prev, cur) => {
+      const displayType = this._getTypeForDisplay(cur.type, cur.typeKeywords)
+
+      if (types.indexOf(displayType) < 0) {
+        types.push(displayType);
+        prev.push(this._getAccordionItem(cur));
+      }
+      return prev;
+    }, []);
+
     return (
       <calcite-accordion selectionMode="single">
         {
-          this._sortedTemplateInfos.reduce((prev, cur) => {
-            const displayType = this._getTypeForDisplay(cur.type, cur.typeKeywords)
-            if (this._types.indexOf(displayType) < 0) {
-              this._types.push(displayType);
-              prev.push(this._getAccordionItem(cur));
-            }
-            return prev;
-          }, [])
+          accordion
         }
       </calcite-accordion>
     );

diff --git a/src/demos/solution-item-accordion.html b/src/demos/solution-item-accordion.html
@@ -1,8 +1,7 @@
-<html>
+<html lang="en">
 
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
   <title>Solution Item Accordion</title>
   <!--
     | Copyright 2024 Esri