fix(breadcrumbs): removed item rendering flick (#DS-4622)

packages/components/breadcrumbs/breadcrumbs.html

@@ -3,8 +3,9 @@
 resolved SSR issue with official hack https://github.com/angular/angular/issues/50543#issuecomment-1572900259
 -->
 <ng-content />
-@if (items.length < minVisibleItems || wrapMode() !== 'auto') {
-    @for (item of items; track item) {
+@let allItems = items();
+@if (allItems.length < minVisibleItems || wrapMode() !== 'auto') {
+    @for (item of allItems; track item) {
         <div class="kbq-breadcrumb-item__container">
             <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: item, last: $last }" />
             @if (!$last) {
@@ -13,57 +14,52 @@
         </div>
     }
 } @else {
-    <div
-        #kbqOverflowItems="kbqOverflowItems"
-        kbqOverflowItems
-        reverseOverflowOrder
-        class="layout-align-start-center"
-        [style.max-width.px]="maxWidth"
-    >
-        <div class="kbq-breadcrumb-item__container" [kbqOverflowItem]="0" [order]="items.length">
-            <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: items.first, last: false }" />
+    @let firstItem = allItems[0];
+    @let lastItem = allItems[allItems.length - 1];
+    <div #kbqOverflowItems="kbqOverflowItems" kbqOverflowItems reverseOverflowOrder class="layout-align-start-center">
+        <div class="kbq-breadcrumb-item__container" [kbqOverflowItem]="0" [order]="allItems.length">
+            <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: firstItem, last: false }" />
             <ng-container [ngTemplateOutlet]="separatorTemplate" />
         </div>
-        <!-- @TODO delay rendering for proper elements order (#DS-3334)--->
-        @if (true) {
-            <div kbqOverflowItemsResult class="kbq-breadcrumb-item__container">
-                <button
-                    kbq-button
-                    kbqBreadcrumb
-                    class="kbq-breadcrumb__expand"
-                    [kbqDropdownTriggerFor]="hiddenBreadcrumbsDropdown"
-                    [kbqStyle]="KbqButtonStyles.Transparent"
-                >
-                    <i kbq-icon="kbq-ellipsis-horizontal_16" [color]="KbqComponentColors.ContrastFade"></i>
-                </button>
-                <ng-container [ngTemplateOutlet]="separatorTemplate" />
+        <div kbqOverflowItemsResult class="kbq-breadcrumb-item__container">
+            <button
+                #breadcrumbsResult
+                kbq-button
+                kbqBreadcrumb
+                class="kbq-breadcrumb__expand"
+                [kbqDropdownTriggerFor]="hiddenBreadcrumbsDropdown"
+                [kbqStyle]="KbqButtonStyles.Transparent"
+            >
+                <i kbq-icon="kbq-ellipsis-horizontal_16" [color]="KbqComponentColors.ContrastFade"></i>
+            </button>
+            <ng-container [ngTemplateOutlet]="separatorTemplate" />
 
-                <kbq-dropdown #hiddenBreadcrumbsDropdown="kbqDropdown">
-                    @for (item of items; track item) {
-                        @if (kbqOverflowItems.hiddenItemIDs().has($index)) {
-                            <a kbq-dropdown-item [routerLink]="item.routerLink?.urlTree" [disabled]="item.disabled()">
-                                {{ item.text() }}
-                            </a>
-                        }
+            <kbq-dropdown #hiddenBreadcrumbsDropdown="kbqDropdown">
+                @for (item of allItems; track item) {
+                    @if (kbqOverflowItems.hiddenItemIDs().has($index)) {
+                        <a kbq-dropdown-item [routerLink]="item.routerLink?.urlTree" [disabled]="item.disabled()">
+                            {{ item.text() }}
+                        </a>
                     }
-                </kbq-dropdown>
-            </div>
-        }
-        @for (item of itemsExcludingEdges; track item) {
+                }
+            </kbq-dropdown>
+        </div>
+        @for (item of itemsExcludingEdges(); track item) {
             <div class="kbq-breadcrumb-item__container" [kbqOverflowItem]="$index + 1">
                 <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: item, last: false }" />
                 <ng-container [ngTemplateOutlet]="separatorTemplate" />
             </div>
         }
-        <div alwaysVisible class="kbq-breadcrumb-item__container" [kbqOverflowItem]="items.length - 1">
-            <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: items.last, last: true }" />
+        <div alwaysVisible class="kbq-breadcrumb-item__container" [kbqOverflowItem]="allItems.length - 1">
+            <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: lastItem, last: true }" />
         </div>
     </div>
 }
 
 <ng-template #breadcrumbTemplate let-item let-last="last">
-    @if (item.customTemplateRef()) {
-        <ng-container [ngTemplateOutlet]="item.customTemplateRef()!" />
+    @let customTemplateRef = item.customTemplateRef();
+    @if (customTemplateRef) {
+        <ng-container [ngTemplateOutlet]="customTemplateRef" />
     } @else {
         <a
             kbq-button
@@ -82,8 +78,9 @@
 </ng-template>
 
 <ng-template #separatorTemplate>
-    @if (separator) {
-        <ng-container [ngTemplateOutlet]="separator" />
+    @let separatorTemplate = separator();
+    @if (separatorTemplate) {
+        <ng-container [ngTemplateOutlet]="separatorTemplate" />
     } @else {
         <i kbq-icon="" class="kbq-breadcrumb__separator" [color]="KbqComponentColors.ContrastFade">&nbsp;/&nbsp;</i>
     }

packages/components/breadcrumbs/breadcrumbs.scss

@@ -7,6 +7,13 @@
     gap: var(--kbq-breadcrumbs-gap);
     flex-grow: 1;
 
+    kbq-breadcrumb-item {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
     .kbq-overflow-items {
         // add space not to cut focus outline
         padding: 1px;

packages/components/breadcrumbs/breadcrumbs.spec.ts

@@ -14,6 +14,7 @@ import {
     kbqBreadcrumbsConfigurationProvider
 } from './breadcrumbs';
 import { KbqBreadcrumbsModule } from './breadcrumbs.module';
+import { RdxRovingFocusGroupDirective } from './roving-focus-group.directive';
 
 const createComponent = <T>(component: Type<T>, providers: any[] = [], imports: any[] = []): ComponentFixture<T> => {
     TestBed.configureTestingModule({ imports: [component, ...imports], providers }).compileComponents();
@@ -182,6 +183,60 @@ describe(KbqBreadcrumbs.name, () => {
         }));
     });
 
+    describe('focusable items ordering', () => {
+        function getRovingGroup(fixture: ComponentFixture<any>): RdxRovingFocusGroupDirective {
+            return fixture.debugElement.query(By.directive(KbqBreadcrumbs)).injector.get(RdxRovingFocusGroupDirective);
+        }
+
+        function getExpandButton(fixture: ComponentFixture<any>): HTMLElement | null {
+            return fixture.debugElement.query(By.css('.kbq-breadcrumb__expand'))?.nativeElement ?? null;
+        }
+
+        it('should not place the expand button as the first focusable item on initial render', () => {
+            const fixture = createComponent(SimpleBreadcrumbs, [provideRouter([])]);
+            const focusableItems = getRovingGroup(fixture).focusableItems();
+            const expandButton = getExpandButton(fixture);
+
+            expect(focusableItems.length).toBeGreaterThan(0);
+            expect(focusableItems[0]).not.toBe(expandButton);
+        });
+
+        it('should not place the expand button as the first focusable item after items are added', () => {
+            const fixture = createComponent(SimpleBreadcrumbs, [provideRouter([])]);
+
+            fixture.componentInstance.items.push({ text: 'New Item', disabled: false });
+            fixture.detectChanges();
+
+            const focusableItems = getRovingGroup(fixture).focusableItems();
+            const expandButton = getExpandButton(fixture);
+
+            expect(focusableItems.length).toBeGreaterThan(0);
+            expect(focusableItems[0]).not.toBe(expandButton);
+        });
+
+        it('should not place the expand button as the first focusable item after items are removed', () => {
+            const fixture = createComponent(SimpleBreadcrumbs, [provideRouter([])]);
+
+            fixture.componentInstance.items.splice(1, 1);
+            fixture.detectChanges();
+
+            const focusableItems = getRovingGroup(fixture).focusableItems();
+            const expandButton = getExpandButton(fixture);
+
+            expect(focusableItems.length).toBeGreaterThan(0);
+            expect(focusableItems[0]).not.toBe(expandButton);
+        });
+
+        it('should not modify focusableItems when fewer than two items are registered', () => {
+            const fixture = createComponent(SingleBreadcrumb, [provideRouter([])]);
+            const focusableItems = getRovingGroup(fixture).focusableItems();
+
+            // A single breadcrumb renders as $last → focusable=false → nothing registered.
+            // The effect must return early and leave focusableItems unchanged (empty).
+            expect(focusableItems.length).toBe(0);
+        });
+    });
+
     describe('customization', () => {
         it('should use the custom separator template', () => {
             const fixture = createComponent(BreadcrumbsCustomization, [
@@ -305,3 +360,13 @@ class TestDropdownBreadcrumbs extends SimpleBreadcrumbs {
         return `./${text}`;
     }
 }
+
+@Component({
+    imports: [KbqBreadcrumbsModule],
+    template: `
+        <kbq-breadcrumbs>
+            <kbq-breadcrumb-item text="Home" />
+        </kbq-breadcrumbs>
+    `
+})
+class SingleBreadcrumb {}