fix(addon-mobile): cancel macrotask in tui-sheet when component des…

…troyed (#6771)
taiga-family · Feb 14, 2024 · 438a5d7 · 438a5d7
1 parent dec093f
commit 438a5d7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/projects/addon-mobile/components/sheet/components/sheet/sheet.component.ts b/projects/addon-mobile/components/sheet/components/sheet/sheet.component.ts
@@ -8,15 +8,21 @@ import {
     Input,
     NgZone,
     QueryList,
+    Self,
     ViewChild,
     ViewChildren,
 } from '@angular/core';
-import {EMPTY_QUERY, TUI_IS_IOS, tuiPure, tuiZonefull} from '@taiga-ui/cdk';
+import {
+    EMPTY_QUERY,
+    TUI_IS_IOS,
+    TuiDestroyService,
+    tuiPure,
+    tuiZonefull,
+} from '@taiga-ui/cdk';
 import {tuiSlideInTop} from '@taiga-ui/core';
 import {TUI_MORE_WORD} from '@taiga-ui/kit';
-import {map, Observable} from 'rxjs';
+import {map, Observable, takeUntil, timer} from 'rxjs';
 
-import {fakeSmoothScroll} from '../../ios.hacks';
 import {TuiSheet, TuiSheetRequiredProps} from '../../sheet';
 import {TUI_SHEET_SCROLL} from '../../sheet-tokens';
 import {TUI_SHEET_ID} from '../sheet-heading/sheet-heading.component';
@@ -61,6 +67,7 @@ export class TuiSheetComponent<T> implements TuiSheetRequiredProps<T>, AfterView
         @Inject(NgZone) private readonly zone: NgZone,
         @Inject(TUI_IS_IOS) readonly isIos: boolean,
         @Inject(TUI_MORE_WORD) readonly moreWord$: Observable<string>,
+        @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable<void>,
     ) {}
 
     get stops(): readonly number[] {
@@ -98,7 +105,17 @@ export class TuiSheetComponent<T> implements TuiSheetRequiredProps<T>, AfterView
         const {nativeElement} = this.el;
 
         if (this.isIos) {
-            fakeSmoothScroll(nativeElement, top - nativeElement.scrollTop - 16);
+            const offset = top - nativeElement.scrollTop - 16;
+
+            nativeElement.style.transition = 'none';
+            nativeElement.style.transform = `scaleX(-1) translate3d(0, ${offset}px, 0)`;
+
+            timer(0)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                    nativeElement.style.transition = '';
+                    nativeElement.style.transform = '';
+                });
         }
 
         nativeElement.scrollTo({top, behavior: 'smooth'});

diff --git a/projects/addon-mobile/components/sheet/ios.hacks.ts b/projects/addon-mobile/components/sheet/ios.hacks.ts
@@ -50,14 +50,3 @@ export function iosScrollFactory(
 
     return concat(scroll$.pipe(take(1)), result$).pipe(tuiZonefree(zone), share());
 }
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function fakeSmoothScroll({style}: HTMLElement, offset: number): void {
-    style.transition = 'none';
-    style.transform = `scaleX(-1) translate3d(0, ${offset}px, 0)`;
-
-    setTimeout(() => {
-        style.transition = '';
-        style.transform = '';
-    });
-}