feat(core): Dialog/Dropdown use CloseWatcher to close on Android native back button

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

@@ -1,22 +1,20 @@
 import {NgForOf, NgIf} from '@angular/common';
 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 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 {shouldCall} from '@taiga-ui/event-plugins';
 import {injectContext, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
+import {filter, isObservable, merge, of, Subject, switchMap} from 'rxjs';
 
 import type {TuiSheetDialogOptions} from './sheet-dialog.options';
 
-// So we re-enter ngZone and trigger change detection
-function isCloseable(this: TuiSheetDialogComponent<unknown>): boolean {
-    return this.context.closeable === true;
-}
-
 @Component({
     standalone: true,
     selector: 'tui-sheet-dialog',
@@ -28,12 +26,12 @@ function isCloseable(this: TuiSheetDialogComponent<unknown>): boolean {
     host: {
         '[@tuiSlideInTop]': 'slideInTop',
         '[style.--tui-offset.px]': 'context.offset',
-        '[class._closeable]': 'context.closeable === true',
+        '[class._closeable]': 'context.closeable',
         '(document:touchstart.passive.silent)': 'onPointerChange(1)',
         '(document:touchend.silent)': 'onPointerChange(-1)',
         '(document:touchcancel.silent)': 'onPointerChange(-1)',
         '(scroll.silent)': 'onPointerChange(0)',
-        '(click.self)': 'close()',
+        '(click.self)': 'close$.next()',
     },
 })
 export class TuiSheetDialogComponent<I> implements AfterViewInit {
@@ -54,24 +52,43 @@ export class TuiSheetDialogComponent<I> implements AfterViewInit {
     protected readonly context =
         injectContext<TuiPopover<TuiSheetDialogOptions<I>, any>>();
 
-    public ngAfterViewInit(): void {
-        this.el.scrollTop =
-            [
-                ...this.stops.map((e) => e.nativeElement.offsetTop - this.context.offset),
-                this.el.clientHeight ?? Infinity,
-            ][this.context.initial] ?? 0;
-    }
+    protected readonly close$ = new Subject<void>();
+    protected readonly $ = merge(this.close$, tuiCloseWatcher())
+        .pipe(
+            tuiZonefull(),
+            switchMap(() => {
+                if (isObservable(this.context.closeable)) {
+                    if (this.el.scrollTop <= 0) {
+                        this.el.scrollTo({top: this.initial, behavior: 'smooth'});
+                    }
+
+                    return this.context.closeable;
+                }
 
-    @shouldCall(isCloseable)
-    protected close(): void {
-        this.context.$implicit.complete();
+                return of(this.context.closeable);
+            }),
+            filter(Boolean),
+            takeUntilDestroyed(),
+        )
+        .subscribe(() => this.context.$implicit.complete());
+
+    public ngAfterViewInit(): void {
+        this.el.scrollTop = this.initial;
     }
 
     protected onPointerChange(delta: number): void {
         this.pointers = Math.max(this.pointers + delta, 0);
 
         if (!this.pointers && this.el.scrollTop <= 0) {
-            this.close();
+            this.close$.next();
         }
     }
+
+    private get initial(): number {
+        return (
+            this.stops
+                .map((e) => e.nativeElement.offsetTop - this.context.offset)
+                .concat(this.el.clientHeight ?? Infinity)[this.context.initial] ?? 0
+        );
+    }
 }

projects/cdk/utils/miscellaneous/close-watcher.ts

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

projects/cdk/utils/miscellaneous/index.ts

@@ -2,6 +2,7 @@ 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,13 +1,14 @@
 import {DOCUMENT} from '@angular/common';
 import {inject, Injectable} from '@angular/core';
 import {WA_WINDOW} from '@ng-web-apis/common';
-import {tuiTypedFromEvent} from '@taiga-ui/cdk/observables';
+import {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';
 
@@ -24,7 +25,9 @@ export class TuiDialogCloseService extends Observable<unknown> {
             const target = tuiGetActualTarget(event);
 
             return (
-                event.key === 'Escape' &&
+                // @ts-ignore
+                typeof CloseWatcher === 'undefined' &&
+                event.key.toLowerCase() === 'escape' &&
                 !event.defaultPrevented &&
                 (this.el.contains(target) || this.isOutside(target))
             );
@@ -47,7 +50,13 @@ export class TuiDialogCloseService extends Observable<unknown> {
     );
 
     constructor() {
-        super((subscriber) => merge(this.esc$, this.mousedown$).subscribe(subscriber));
+        super((subscriber) =>
+            merge(
+                this.esc$,
+                this.mousedown$,
+                tuiCloseWatcher().pipe(tuiZonefull()),
+            ).subscribe(subscriber),
+        );
     }
 
     private isOutside(target: EventTarget): boolean {

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

@@ -12,7 +12,7 @@ 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} from '@taiga-ui/cdk/observables';
+import {tuiWatch, tuiZonefull} from '@taiga-ui/cdk/observables';
 import {
     tuiGetActualTarget,
     tuiInjectElement,
@@ -25,6 +25,7 @@ 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';
@@ -35,6 +36,8 @@ import {TuiDropdownDriver} from './dropdown.driver';
 
 function shouldClose(this: TuiDropdownOpen, event: Event | KeyboardEvent): boolean {
     return (
+        // @ts-ignore
+        typeof CloseWatcher === 'undefined' &&
         'key' in event &&
         event.key.toLowerCase() === 'escape' &&
         this.tuiDropdownEnabled &&
@@ -76,14 +79,20 @@ export class TuiDropdownOpen implements OnChanges {
     );
 
     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(tuiWatch(), takeUntilDestroyed())
+        .pipe(
+            filter(() => !!this.tuiDropdownOpen),
+            tuiZonefull(),
+            tuiWatch(),
+            takeUntilDestroyed(),
+        )
         .subscribe(() => this.toggle(false));
 
     @Input()

projects/demo/src/modules/components/dialog/examples/8/index.ts

@@ -2,6 +2,7 @@ import {Component, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiResponsiveDialogService} from '@taiga-ui/addon-mobile';
 import {TuiButton, TuiDialogService} from '@taiga-ui/core';
 import {TuiConfirmService} from '@taiga-ui/kit';
 import {TuiInputModule} from '@taiga-ui/legacy';
@@ -13,7 +14,13 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    providers: [TuiConfirmService],
+    providers: [
+        TuiConfirmService,
+        {
+            provide: TuiDialogService,
+            useExisting: TuiResponsiveDialogService,
+        },
+    ],
 })
 export default class Example {
     private readonly confirm = inject(TuiConfirmService);