fix(kit): Slider readonly state (mobile chrome bug)

taiga-family · Apr 25, 2022 · 3d2c8b2 · 3d2c8b2
1 parent 214713b
commit 3d2c8b2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/projects/kit/components/range/range.style.less b/projects/kit/components/range/range.style.less
@@ -12,6 +12,7 @@
     cursor: pointer;
     outline: none;
     margin: @extra-click-area-space 0;
+    touch-action: pan-x;
 
     &:active {
         cursor: ew-resize;

diff --git a/projects/kit/components/slider/slider-readonly.directive.ts b/projects/kit/components/slider/slider-readonly.directive.ts
@@ -1,5 +1,13 @@
-import {Directive, HostListener, Input} from '@angular/core';
-import {tuiDefaultProp} from '@taiga-ui/cdk';
+import {DOCUMENT} from '@angular/common';
+import {Directive, ElementRef, HostListener, Inject, Input} from '@angular/core';
+import {
+    tuiCoerceBooleanProperty,
+    tuiDefaultProp,
+    TuiDestroyService,
+    typedFromEvent,
+} from '@taiga-ui/cdk';
+import {combineLatest, merge, Observable} from 'rxjs';
+import {filter, mapTo, takeUntil, tap} from 'rxjs/operators';
 
 const SLIDER_INTERACTION_KEYS = new Set([
     'ArrowLeft',
@@ -16,18 +24,55 @@ const SLIDER_INTERACTION_KEYS = new Set([
  * Native <input type='range' readonly> doesn't work.
  * This directive imitates this native behaviour.
  */
+// @dynamic
 @Directive({
     selector: 'input[tuiSlider][readonly]',
+    providers: [TuiDestroyService],
 })
 export class TuiSliderReadonlyDirective {
     @Input()
     @tuiDefaultProp()
-    readonly: '' | boolean = true;
+    readonly: string | boolean = true;
+
+    constructor(
+        @Inject(ElementRef) elementRef: ElementRef<HTMLInputElement>,
+        @Inject(DOCUMENT) documentRef: Document,
+        @Inject(TuiDestroyService)
+        destroy$: Observable<unknown>,
+    ) {
+        const touchStart$ = typedFromEvent(elementRef.nativeElement, 'touchstart', {
+            passive: false,
+        });
+        const touchMove$ = typedFromEvent(documentRef, 'touchmove', {
+            passive: false,
+        });
+        const touchEnd$ = typedFromEvent(documentRef, 'touchend', {
+            passive: true,
+        });
+
+        const shouldPreventMove$ = merge(
+            touchStart$.pipe(
+                tap(e => this.preventEvent(e)),
+                mapTo(true),
+            ),
+            touchEnd$.pipe(mapTo(false)),
+        );
+
+        /**
+         * @bad TODO think about another solution.
+         * Keep in mind that preventing touch event (on slider) inside `@HostListener('touchstart')` doesn't work for mobile chrome.
+         */
+        combineLatest([touchMove$, shouldPreventMove$])
+            .pipe(
+                filter(([_, shouldPreventMove]) => shouldPreventMove),
+                takeUntil(destroy$),
+            )
+            .subscribe(([moveEvent]) => this.preventEvent(moveEvent));
+    }
 
     @HostListener('mousedown', ['$event'])
-    @HostListener('touchstart', ['$event'])
     preventEvent(event: Event) {
-        if (this.readonly === '' || this.readonly) {
+        if (event.cancelable && tuiCoerceBooleanProperty(this.readonly)) {
             event.preventDefault();
         }
     }