fix(breadcrumbs): fix rendering issues on load (#2239)

Teradata · Sep 6, 2024 · 744f1e0 · 744f1e0
1 parent e827ffc
commit 744f1e0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss b/libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss
@@ -5,7 +5,7 @@
     flex-direction: row;
     align-items: center;
     align-content: center;
-    max-width: 100%;
+    flex-shrink: 0;
     justify-content: flex-end;
 
     ::ng-deep > * {

diff --git a/libs/angular/breadcrumbs/src/breadcrumbs.component.ts b/libs/angular/breadcrumbs/src/breadcrumbs.component.ts
@@ -10,6 +10,7 @@ import {
   ElementRef,
   Input,
   HostBinding,
+  AfterViewInit,
 } from '@angular/core';
 
 import { fromEvent, Subject } from 'rxjs';
@@ -24,7 +25,7 @@ import { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TdBreadcrumbsComponent
-  implements OnInit, AfterContentInit, OnDestroy
+  implements OnInit, AfterContentInit, AfterViewInit, OnDestroy
 {
   private _resizing = false;
   private _separatorIcon = 'chevron_right';
@@ -69,12 +70,17 @@ export class TdBreadcrumbsComponent
       });
   }
 
+  ngAfterViewInit(): void {
+    this._waitToCalculateVisibility();
+  }
+
   ngAfterContentInit(): void {
     // Note: doesn't need to unsubscribe since `QueryList.changes`
     // gets completed by Angular when the view is destroyed.
     this._breadcrumbs.changes
       .pipe(startWith(this._breadcrumbs))
       .subscribe(() => {
+        this._waitToCalculateVisibility();
         this.setCrumbIcons();
         this._changeDetectorRef.markForCheck();
       });
@@ -156,4 +162,10 @@ export class TdBreadcrumbsComponent
     this.hiddenBreadcrumbs = hiddenCrumbs;
     this._changeDetectorRef.markForCheck();
   }
+
+  private _waitToCalculateVisibility(): void {
+    setTimeout(() => {
+      this._calculateVisibility();
+    });
+  }
 }