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'); + }); });