chore: fix

projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts

@@ -3,15 +3,14 @@ import type {AfterViewInit, ElementRef, QueryList} from '@angular/core';
 import {ChangeDetectionStrategy, Component, inject, ViewChildren} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
-import {tuiZonefull} from '@taiga-ui/cdk/observables';
+import {tuiCloseWatcher, tuiZonefull} from '@taiga-ui/cdk/observables';
 import type {TuiPopover} from '@taiga-ui/cdk/services';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
-import {tuiCloseWatcher} from '@taiga-ui/cdk/utils/miscellaneous';
 import {tuiSlideInTop} from '@taiga-ui/core/animations';
 import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
 import {tuiGetDuration} from '@taiga-ui/core/utils/miscellaneous';
 import {injectContext, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
-import {filter, isObservable, merge, of, Subject, switchMap} from 'rxjs';
+import {exhaustMap, filter, isObservable, merge, of, Subject, take} from 'rxjs';
 
 import type {TuiSheetDialogOptions} from './sheet-dialog.options';
 
@@ -56,13 +55,13 @@ export class TuiSheetDialogComponent<I> implements AfterViewInit {
     protected readonly $ = merge(this.close$, tuiCloseWatcher())
         .pipe(
             tuiZonefull(),
-            switchMap(() => {
+            exhaustMap(() => {
                 if (isObservable(this.context.closeable)) {
                     if (this.el.scrollTop <= 0) {
                         this.el.scrollTo({top: this.initial, behavior: 'smooth'});
                     }
 
-                    return this.context.closeable;
+                    return this.context.closeable.pipe(take(1));
                 }
 
                 return of(this.context.closeable);

projects/cdk/observables/close-watcher.ts

@@ -0,0 +1,31 @@
+import {Observable} from 'rxjs';
+
+interface CloseWatcher {
+    destroy: () => void;
+    onclose?: (event: Event) => void;
+    oncancel?: (event: Event) => void;
+}
+
+export function tuiCloseWatcher(): Observable<void> {
+    return new Observable((subscriber) => {
+        let watcher = getWatcher();
+
+        const setup = () => {
+            watcher = getWatcher();
+            watcher.onclose = () => setup();
+            watcher.oncancel = (event) => {
+                event.preventDefault();
+                subscriber.next();
+            };
+        };
+
+        setup();
+
+        return () => watcher.destroy();
+    });
+}
+
+function getWatcher(): CloseWatcher {
+    // @ts-ignore
+    return typeof CloseWatcher === 'undefined' ? {destroy: () => {}} : new CloseWatcher();
+}

projects/cdk/observables/index.ts

@@ -1,3 +1,4 @@
+export * from './close-watcher';
 export * from './control-value';
 export * from './drag-and-drop-from';
 export * from './events';

projects/cdk/utils/miscellaneous/index.ts

@@ -2,7 +2,6 @@ export * from './array-remove';
 export * from './array-shallow-equals';
 export * from './array-toggle';
 export * from './change-date-separator';
-export * from './close-watcher';
 export * from './count-filled-controls';
 export * from './create-token';
 export * from './default-sort';

projects/core/components/dialog/dialog-close.service.ts

@@ -1,14 +1,13 @@
 import {DOCUMENT} from '@angular/common';
 import {inject, Injectable} from '@angular/core';
 import {WA_WINDOW} from '@ng-web-apis/common';
-import {tuiTypedFromEvent, tuiZonefull} from '@taiga-ui/cdk/observables';
+import {tuiCloseWatcher, tuiTypedFromEvent, tuiZonefull} from '@taiga-ui/cdk/observables';
 import {
     tuiContainsOrAfter,
     tuiGetActualTarget,
     tuiInjectElement,
     tuiIsElement,
 } from '@taiga-ui/cdk/utils/dom';
-import {tuiCloseWatcher} from '@taiga-ui/cdk/utils/miscellaneous';
 import {tuiGetViewportWidth} from '@taiga-ui/core/utils';
 import {filter, map, merge, Observable, switchMap, take} from 'rxjs';
 

projects/core/components/dialog/dialog.component.ts

@@ -16,7 +16,17 @@ import {tuiGetDuration} from '@taiga-ui/core/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {injectContext, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 import type {Observable} from 'rxjs';
-import {filter, isObservable, map, merge, of, Subject, switchMap} from 'rxjs';
+import {
+    exhaustMap,
+    filter,
+    isObservable,
+    map,
+    merge,
+    of,
+    Subject,
+    switchMap,
+    take,
+} from 'rxjs';
 
 import type {TuiDialogOptions, TuiDialogSize} from './dialog.interfaces';
 import {TUI_DIALOGS_CLOSE} from './dialog.tokens';
@@ -84,7 +94,7 @@ export class TuiDialogComponent<O, I> {
         merge(
             this.close$.pipe(switchMap(() => toObservable(this.context.closeable))),
             inject(TuiDialogCloseService).pipe(
-                switchMap(() => toObservable(this.context.dismissible)),
+                exhaustMap(() => toObservable(this.context.dismissible).pipe(take(1))),
             ),
             inject(TUI_DIALOGS_CLOSE).pipe(map(TUI_TRUE_HANDLER)),
         )

projects/core/directives/dropdown/dropdown-open.directive.ts

@@ -12,7 +12,12 @@ import {
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';
 import {TuiObscured} from '@taiga-ui/cdk/directives/obscured';
-import {tuiWatch, tuiZonefull} from '@taiga-ui/cdk/observables';
+import {
+    tuiCloseWatcher,
+    tuiIfMap,
+    tuiWatch,
+    tuiZonefull,
+} from '@taiga-ui/cdk/observables';
 import {
     tuiGetActualTarget,
     tuiInjectElement,
@@ -25,20 +30,18 @@ import {
     tuiIsNativeFocusedIn,
     tuiIsNativeKeyboardFocusable,
 } from '@taiga-ui/cdk/utils/focus';
-import {tuiCloseWatcher} from '@taiga-ui/cdk/utils/miscellaneous';
 import {tuiAsDriver} from '@taiga-ui/core/classes';
 import {tuiIsEditingKey} from '@taiga-ui/core/utils/miscellaneous';
 import {shouldCall} from '@taiga-ui/event-plugins';
-import {filter, fromEvent, map, merge} from 'rxjs';
+import {filter, fromEvent, merge} from 'rxjs';
 
 import {TuiDropdownDirective} from './dropdown.directive';
 import {TuiDropdownDriver} from './dropdown.driver';
 
-function shouldClose(this: TuiDropdownOpen, event: Event | KeyboardEvent): boolean {
+function shouldClose(this: TuiDropdownOpen, event: KeyboardEvent): boolean {
     return (
         // @ts-ignore
         typeof CloseWatcher === 'undefined' &&
-        'key' in event &&
         event.key.toLowerCase() === 'escape' &&
         this.tuiDropdownEnabled &&
         !!this.tuiDropdownOpen &&
@@ -73,28 +76,12 @@ export class TuiDropdownOpen implements OnChanges {
     private readonly directive = inject(TuiDropdownDirective);
     private readonly el = tuiInjectElement();
     private readonly obscured = inject(TuiObscured);
+    private readonly activeZone = inject(TuiActiveZone);
 
     private readonly dropdown = computed(
         () => this.directive.ref()?.location.nativeElement,
     );
 
-    protected readonly sub = merge(
-        tuiCloseWatcher(),
-        this.obscured.tuiObscured.pipe(filter(Boolean)),
-        inject(TuiActiveZone).tuiActiveZoneChange.pipe(filter((a) => !a)),
-        fromEvent(this.el, 'focusin').pipe(
-            map(tuiGetActualTarget),
-            filter((target) => !this.host.contains(target) || !this.directive.ref()),
-        ),
-    )
-        .pipe(
-            filter(() => !!this.tuiDropdownOpen),
-            tuiZonefull(),
-            tuiWatch(),
-            takeUntilDestroyed(),
-        )
-        .subscribe(() => this.toggle(false));
-
     @Input()
     public tuiDropdownEnabled = true;
 
@@ -106,6 +93,27 @@ export class TuiDropdownOpen implements OnChanges {
 
     // TODO: make it private when all legacy controls will be deleted from @taiga-ui/legacy (5.0)
     public readonly driver = inject(TuiDropdownDriver);
+    public readonly sub = this.driver
+        .pipe(
+            tuiIfMap(() =>
+                merge(
+                    tuiCloseWatcher(),
+                    this.obscured.tuiObscured.pipe(filter(Boolean)),
+                    this.activeZone.tuiActiveZoneChange.pipe(filter((a) => !a)),
+                    fromEvent(this.el, 'focusin').pipe(
+                        filter(
+                            (event) =>
+                                !this.host.contains(tuiGetActualTarget(event)) ||
+                                !this.directive.ref(),
+                        ),
+                    ),
+                ),
+            ),
+            tuiZonefull(),
+            tuiWatch(),
+            takeUntilDestroyed(),
+        )
+        .subscribe(() => this.toggle(false));
 
     public ngOnChanges(): void {
         this.update(!!this.tuiDropdownOpen);
@@ -120,7 +128,7 @@ export class TuiDropdownOpen implements OnChanges {
     }
 
     @shouldCall(shouldClose)
-    protected onEsc(event: Event): void {
+    protected onEsc(event: KeyboardEvent): void {
         event.preventDefault();
         this.toggle(false);
     }