From 8b49ac10554fc06173da49a2fa81a7ad20d04e96 Mon Sep 17 00:00:00 2001
From: Nikita Guryev <nikgurv@gmail.com>
Date: Wed, 1 Jul 2026 16:52:21 +0300
Subject: [PATCH 1/2] fix(breadcrumbs): close result dropdown when no hidden
 items (#DS-4578)

---
 .../components/breadcrumbs/breadcrumbs.ts     |  4 +++-
 .../breadcrumbs/e2e.playwright-spec.ts        | 21 +++++++++++++++++++
 packages/components/breadcrumbs/e2e.ts        |  7 +++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/components/breadcrumbs/breadcrumbs.ts b/packages/components/breadcrumbs/breadcrumbs.ts
index a6ffc4e2d..d539dd6a0 100644
--- a/packages/components/breadcrumbs/breadcrumbs.ts
+++ b/packages/components/breadcrumbs/breadcrumbs.ts
@@ -25,7 +25,7 @@ import { outputToObservable, takeUntilDestroyed, toObservable } from '@angular/c
 import { RouterLink } from '@angular/router';
 import { KbqButton, KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors, KbqDefaultSizes, PopUpPlacements } from '@koobiq/components/core';
-import { KbqDropdownModule } from '@koobiq/components/dropdown';
+import { KbqDropdownModule, KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqIconModule } from '@koobiq/components/icon';
 import {
     KbqOverflowItem,
@@ -209,6 +209,7 @@ export class KbqBreadcrumbs {
     protected readonly items = contentChildren<KbqBreadcrumbItem>(forwardRef(() => KbqBreadcrumbItem));
 
     private readonly breadcrumbsResult = viewChild('breadcrumbsResult', { read: ElementRef });
+    private readonly resultDropdownTrigger = viewChild('breadcrumbsResult', { read: KbqDropdownTrigger });
     private readonly result = viewChild(KbqOverflowItemsResult);
     private readonly overflowItems = viewChildren<KbqOverflowItem>(forwardRef(() => KbqOverflowItem));
     private readonly overflowItemsDir = viewChild(KbqOverflowItems);
@@ -292,6 +293,7 @@ export class KbqBreadcrumbs {
         const hideResultIfAllVisible = () => {
             if (allVisibleItems.length === items.length) {
                 result?.hide();
+                this.resultDropdownTrigger()?.close();
             }
         };
 
diff --git a/packages/components/breadcrumbs/e2e.playwright-spec.ts b/packages/components/breadcrumbs/e2e.playwright-spec.ts
index cc64a1afc..2572c1f7a 100644
--- a/packages/components/breadcrumbs/e2e.playwright-spec.ts
+++ b/packages/components/breadcrumbs/e2e.playwright-spec.ts
@@ -33,6 +33,27 @@ test.describe('KbqBreadcrumbs overflow', () => {
         await expect(dropdownItems.nth(0)).toHaveText('Item #1');
         await expect(dropdownItems.nth(1)).toHaveText('Item #2');
     });
+
+    test('should hide dropdown panel when breadcrumb items fits into container', async ({ page }) => {
+        await page.goto('/E2eBreadcrumbsOverflowMax');
+
+        const dropdownPanel = () => page.locator('.kbq-dropdown__panel');
+
+        const breadcrumbs = page.getByTestId('e2eBreadcrumbsOverflow');
+        const breadcrumbsHost = page.getByTestId('e2eBreadcrumbsOverflowMaxHost');
+
+        await breadcrumbs.locator('.kbq-breadcrumb__expand').click();
+
+        await expect(dropdownPanel()).toBeVisible();
+
+        const dropdownItems = dropdownPanel().locator('[kbq-dropdown-item]');
+
+        await expect(dropdownItems).toBeVisible();
+
+        await breadcrumbsHost.evaluate(({ style }) => (style.width = '1000px'));
+
+        await expect(dropdownPanel()).not.toBeVisible();
+    });
 });
 
 test.describe('KbqBreadcrumbsModule', () => {
diff --git a/packages/components/breadcrumbs/e2e.ts b/packages/components/breadcrumbs/e2e.ts
index 6918b5bad..76aa6be32 100644
--- a/packages/components/breadcrumbs/e2e.ts
+++ b/packages/components/breadcrumbs/e2e.ts
@@ -144,6 +144,13 @@ export class E2eBreadcrumbsStateAndStyle {
                 <kbq-breadcrumb-item [text]="breadcrumb" [routerLink]="breadcrumb" />
             }
         </nav>
+
+        <!-- Container used for width overflow tests -->
+        <nav kbq-breadcrumbs data-testid="e2eBreadcrumbsOverflow" [max]="null">
+            @for (breadcrumb of items; track breadcrumb) {
+                <kbq-breadcrumb-item [text]="breadcrumb" [routerLink]="breadcrumb" />
+            }
+        </nav>
     `,
     styles: `
         :host {

From 923b286be9eebdd3fabca57471e0a2e56c3cebee Mon Sep 17 00:00:00 2001
From: Nikita Guryev <nikgurv@gmail.com>
Date: Thu, 2 Jul 2026 10:33:18 +0300
Subject: [PATCH 2/2] chore: after review

---
 packages/components/breadcrumbs/e2e.playwright-spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/breadcrumbs/e2e.playwright-spec.ts b/packages/components/breadcrumbs/e2e.playwright-spec.ts
index 2572c1f7a..d869e83d9 100644
--- a/packages/components/breadcrumbs/e2e.playwright-spec.ts
+++ b/packages/components/breadcrumbs/e2e.playwright-spec.ts
@@ -34,7 +34,7 @@ test.describe('KbqBreadcrumbs overflow', () => {
         await expect(dropdownItems.nth(1)).toHaveText('Item #2');
     });
 
-    test('should hide dropdown panel when breadcrumb items fits into container', async ({ page }) => {
+    test('should hide dropdown panel when breadcrumb items fit into container', async ({ page }) => {
         await page.goto('/E2eBreadcrumbsOverflowMax');
 
         const dropdownPanel = () => page.locator('.kbq-dropdown__panel');
@@ -48,7 +48,7 @@ test.describe('KbqBreadcrumbs overflow', () => {
 
         const dropdownItems = dropdownPanel().locator('[kbq-dropdown-item]');
 
-        await expect(dropdownItems).toBeVisible();
+        await expect(dropdownItems).toHaveCount(2);
 
         await breadcrumbsHost.evaluate(({ style }) => (style.width = '1000px'));