From 0bd6ca85d014acc10ed37b6d3f9e70e1ee4e2c30 Mon Sep 17 00:00:00 2001
From: Anton Korzunov <thekashey@gmail.com>
Date: Sat, 16 Apr 2022 18:16:09 +1000
Subject: [PATCH] fix: correct range input behavior, fixes #64

---
 src/SideEffect.tsx  | 6 ++++++
 src/handleScroll.ts | 5 +----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/SideEffect.tsx b/src/SideEffect.tsx
index a6287ed..f96e092 100644
--- a/src/SideEffect.tsx
+++ b/src/SideEffect.tsx
@@ -86,6 +86,12 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
       const moveDirection: Axis =
         Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
 
+      // allow horizontal touch move on Range inputs. They will not cause any scroll
+      if ('touches' in event && moveDirection === 'h' && (target as HTMLInputElement).type === 'range') {
+        return false;
+      }
+
+
       let canBeScrolledInMainDirection = locationCouldBeScrolled(
         moveDirection,
         target
diff --git a/src/handleScroll.ts b/src/handleScroll.ts
index e7a5f83..403886c 100644
--- a/src/handleScroll.ts
+++ b/src/handleScroll.ts
@@ -10,10 +10,7 @@ const elementCouldBeVScrolled = (node: HTMLElement): boolean => {
 
 const elementCouldBeHScrolled = (node: HTMLElement): boolean => {
   const styles = window.getComputedStyle(node);
-  // we allow horizontal scroll on range elements
-  if ((node as HTMLInputElement).type === "range") {
-    return true;
-  }
+
   return (
     styles.overflowX !== 'hidden' && // not-not-scrollable
     !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable