fix(core): close dropdown when dropdown host is hidden via css (#9189)

taiga-family · Sep 25, 2024 · 3e991f9 · 3e991f9
1 parent 3568826
commit 3e991f9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git 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
@@ -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');
+    });
 });