fix(tree-view): truncation on first render

mi6 · Feb 24, 2025 · 6ecaafe · 6ecaafe
1 parent 7cab72a
commit 6ecaafe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 25 deletions.
diff --git a/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.tsx b/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.tsx
@@ -169,12 +169,16 @@ export class TreeItem {
       childList: true,
     });
   }
-
-  componentDidUpdate(): void {
-    // Truncation is run here because truncateTreeItem prop gets applied on second render
-    // if being passed down from parent tree view
+  componentDidRender(): void {
     this.truncateTreeItem && this.truncateTreeItemLabel(this.el);
+    if (this.expanded) {
+      this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {
+        child.truncateTreeItem && this.truncateTreeItemLabel(child);
+      });
+    }
+  }
 
+  componentDidUpdate(): void {
     if (this.hasParentExpanded) {
       this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {
         child.truncateTreeItem && this.truncateTreeItemLabel(child);

diff --git a/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.tsx b/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.tsx
@@ -98,17 +98,20 @@ export class TreeView {
 
     this.hostMutationObserver?.disconnect();
   }
-
-  componentDidLoad(): void {
+  componentWillLoad(): void {
     this.setTreeItems();
 
     this.watchSizeHandler();
     this.watchFocusInsetHandler();
     this.watchThemeHandler();
     this.watchTruncateTreeItemsHandler();
+  }
 
+  componentDidRender(): void {
     this.truncateHeading && this.truncateTreeViewHeading();
+  }
 
+  componentDidLoad(): void {
     this.addSlotChangeListener();
 
     this.hostMutationObserver = new MutationObserver((mutationList) =>
@@ -295,15 +298,7 @@ export class TreeView {
   };
 
   render() {
-    const {
-      focusInset,
-      heading,
-      isLoaded,
-      size,
-      theme,
-      truncateHeading,
-      truncateTreeItems,
-    } = this;
+    const { heading, isLoaded, size, theme, truncateHeading } = this;
 
     return (
       <Host
@@ -338,16 +333,8 @@ export class TreeView {
             </ic-typography>
           </div>
         )}
-        <div
-          // Hide tree items until fully loaded with props passed down from tree view - prevents FOUC
-          class={{
-            "tree-items-container-hidden":
-              (focusInset || size !== "medium" || truncateTreeItems) &&
-              !isLoaded,
-          }}
-        >
-          <slot></slot>
-        </div>
+
+        <slot></slot>
       </Host>
     );
   }