fix(breadcrumbs): Fixes an ExpressionChangedAfterChecked error on the…

… breadcrumbs in non OnPush environments.
dynatrace-oss · Feb 9, 2021 · f8d173e · f8d173e
1 parent fdb23e1
commit f8d173e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/libs/barista-components/breadcrumbs/src/breadcrumbs-item.ts b/libs/barista-components/breadcrumbs/src/breadcrumbs-item.ts
@@ -31,24 +31,25 @@ const BREADCRUMBS_ITEM_ELLIPSIS_CLASS = `dt-breadcrumbs-item-ellipsis`;
   exportAs: 'dtBreadcrumbsItem',
   host: {
     class: 'dt-breadcrumbs-item',
-    '[class.dt-breadcrumbs-item-non-interactive]': '!_isFocusable',
     '(keydown)': '_onKeyDown($event)',
   },
 })
 export class DtBreadcrumbsItem2 implements Highlightable {
-  constructor(
-    readonly _elementRef: ElementRef<HTMLAnchorElement>,
-    private _interactivityChecker: InteractivityChecker,
-  ) {}
-
+  /** @internal Whether the breadcrumb is focusable - determined by the interactivity checker */
   get _isFocusable(): boolean {
     return this._interactivityChecker.isFocusable(
       this._elementRef.nativeElement,
     );
   }
 
+  /** @internal Stream of keydown events on the breadcrumb item */
   _onKeyDown$ = new Subject<KeyboardEvent>();
 
+  constructor(
+    readonly _elementRef: ElementRef<HTMLAnchorElement>,
+    private _interactivityChecker: InteractivityChecker,
+  ) {}
+
   /** Applies the styles for an active item to this item. Part of the Highlightable interface */
   setActiveStyles(): void {
     if (this._isFocusable) {

diff --git a/libs/barista-components/breadcrumbs/src/breadcrumbs.scss b/libs/barista-components/breadcrumbs/src/breadcrumbs.scss
@@ -138,7 +138,7 @@ $dt-breadcrumbs-panel-min-width: 112px !default;
     outline: none;
   }
 
-  &.dt-breadcrumbs-item-non-interactive {
+  &:not([href]) {
     color: $disabledcolor;
     background-color: inherit;
     cursor: default;