From ec0e290aa48f8bd92650c3401a8585f29572e237 Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Thu, 26 Sep 2024 17:23:33 +0400
Subject: [PATCH] fix(core): `Scrollbar` fix scroll leaking to both directions

---
 projects/core/components/scrollbar/scrollbar.directive.ts | 8 +++++++-
 projects/core/components/scrollbar/scrollbar.service.ts   | 3 ++-
 .../demo/src/modules/components/animations/index.html     | 5 +++++
 projects/demo/src/modules/components/animations/state.ts  | 5 +++--
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/projects/core/components/scrollbar/scrollbar.directive.ts b/projects/core/components/scrollbar/scrollbar.directive.ts
index 91db2c8c45ba..c4cda2771bdb 100644
--- a/projects/core/components/scrollbar/scrollbar.directive.ts
+++ b/projects/core/components/scrollbar/scrollbar.directive.ts
@@ -36,7 +36,13 @@ export class TuiScrollbarDirective {
         .pipe(takeUntilDestroyed())
         .subscribe(([top, left]) => {
             this.el.style.scrollBehavior = 'auto';
-            this.el.scrollTo({top, left});
+
+            if (this.tuiScrollbar === 'horizontal') {
+                this.el.scrollLeft = left;
+            } else {
+                this.el.scrollTop = top;
+            }
+
             this.el.style.scrollBehavior = '';
         });
 
diff --git a/projects/core/components/scrollbar/scrollbar.service.ts b/projects/core/components/scrollbar/scrollbar.service.ts
index 69bf982cebbe..f80848fe7b25 100644
--- a/projects/core/components/scrollbar/scrollbar.service.ts
+++ b/projects/core/components/scrollbar/scrollbar.service.ts
@@ -2,7 +2,7 @@ import {inject, Injectable} from '@angular/core';
 import {tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens';
-import {map, merge, Observable, switchMap, takeUntil} from 'rxjs';
+import {filter, map, merge, Observable, switchMap, takeUntil} from 'rxjs';
 
 @Injectable()
 export class TuiScrollbarService extends Observable<[number, number]> {
@@ -10,6 +10,7 @@ export class TuiScrollbarService extends Observable<[number, number]> {
     private readonly element = inject(TUI_SCROLL_REF).nativeElement;
     private readonly scroll$ = merge(
         tuiTypedFromEvent(this.el.parentElement!, 'mousedown').pipe(
+            filter(({target}) => target !== this.el),
             map((event) => this.getScrolled(event, 0.5, 0.5)),
         ),
         tuiTypedFromEvent(this.el, 'mousedown').pipe(
diff --git a/projects/demo/src/modules/components/animations/index.html b/projects/demo/src/modules/components/animations/index.html
index 40dcb1c85889..dd260130d2c3 100644
--- a/projects/demo/src/modules/components/animations/index.html
+++ b/projects/demo/src/modules/components/animations/index.html
@@ -5,6 +5,11 @@
     type="components"
 >
     <ng-template pageTab>
+        <p>
+            All CSS and Angular animations are controlled with
+            <code>TUI_ANIMATIONS_SPEED</code>
+            token with 1 being a default value
+        </p>
         <label>
             Speed of animations:
             <input
diff --git a/projects/demo/src/modules/components/animations/state.ts b/projects/demo/src/modules/components/animations/state.ts
index f37878d468c7..1f07d909112e 100644
--- a/projects/demo/src/modules/components/animations/state.ts
+++ b/projects/demo/src/modules/components/animations/state.ts
@@ -1,9 +1,10 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
+import {TUI_ANIMATIONS_SPEED, tuiGetDuration} from '@taiga-ui/core';
 import {BehaviorSubject} from 'rxjs';
 
 @Injectable()
 export class AnimationState extends BehaviorSubject<number> {
     constructor() {
-        super(1000);
+        super(tuiGetDuration(inject(TUI_ANIMATIONS_SPEED)));
     }
 }