From 3e991f91323b43664f5466b60e1a599a8bf6c81b Mon Sep 17 00:00:00 2001
From: Vladimir Potekhin <46284632+vladimirpotekhin@users.noreply.github.com>
Date: Wed, 25 Sep 2024 18:34:59 +0300
Subject: [PATCH] fix(core): close dropdown when dropdown host is hidden via
 css (#9189)

---
 .../directives/dropdown/dropdown.component.ts    |  6 ++++--
 .../tests/core/dropdown/dropdown.spec.ts         | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/projects/core/directives/dropdown/dropdown.component.ts b/projects/core/directives/dropdown/dropdown.component.ts
index d67898f1c41c..1b2367f8eb4d 100644
--- a/projects/core/directives/dropdown/dropdown.component.ts
+++ b/projects/core/directives/dropdown/dropdown.component.ts
@@ -66,14 +66,16 @@ export class TuiDropdownComponent {
 
     protected readonly sub = inject(TuiPositionService)
         .pipe(
-            takeWhile(() => this.directive.el.isConnected),
+            takeWhile(
+                () => this.directive.el.isConnected && !!this.directive.el.offsetParent,
+            ),
             map((v) => (this.directive.position === 'fixed' ? this.vvs.correct(v) : v)),
             map(([top, left]) => this.getStyles(top, left)),
             takeUntilDestroyed(),
         )
         .subscribe({
             next: (styles) => Object.assign(this.el.style, styles),
-            complete: () => this.close(),
+            complete: () => this.close?.(),
         });
 
     protected readonly close = (): void => this.directive.toggle(false);
diff --git a/projects/demo-playwright/tests/core/dropdown/dropdown.spec.ts b/projects/demo-playwright/tests/core/dropdown/dropdown.spec.ts
index 94ed71a20a23..d3b84ffd2dc9 100644
--- a/projects/demo-playwright/tests/core/dropdown/dropdown.spec.ts
+++ b/projects/demo-playwright/tests/core/dropdown/dropdown.spec.ts
@@ -106,4 +106,20 @@ test.describe('Dropdown', () => {
 
         await expect(page.locator('tui-dropdown')).not.toBeVisible();
     });
+
+    test('hidden-host', async ({page}) => {
+        await tuiGoto(page, DemoRoute.Dropdown);
+        const example = new TuiDocumentationPagePO(page).getExample('#basic');
+
+        await example.scrollIntoViewIfNeeded();
+        await example.locator('button').click();
+
+        expect(page.locator('tui-dropdown')).toBeDefined();
+
+        await example.locator('button').evaluate((el) => {
+            el.style.display = 'none';
+        });
+
+        await expect(page).toHaveScreenshot('12-dropdown-hidden-host.png');
+    });
 });