feat: Improve tab view gesture handling to distinguish between scroll and swipe (#1131)

- Add vertical scroll detection to prevent unwanted tab changes
- Implement threshold check for horizontal swipe gestures

Author: bajrangCoder

package-lock.json

@@ -108,4 +108,4 @@
     "yargs": "^17.7.2"
   },
   "browserslist": "cover 100%,not android < 5"
-}
+}

package.json

@@ -8,7 +8,10 @@ import Ref from "html-tag-js/ref";
  */
 export default function TabView({ id }, children) {
 	let moveX = 0;
+	let moveY = 0;
 	let lastX = 0;
+	let lastY = 0;
+	let isScrolling = false;
 	const el = new Ref();
 	return (
 		<div
@@ -24,32 +27,52 @@ export default function TabView({ id }, children) {
 
 	function ontouchstart(e) {
 		moveX = 0;
+		moveY = 0;
 		lastX = e.touches[0].clientX;
+		lastY = e.touches[0].clientY;
+		isScrolling = false;
+
 		document.addEventListener("touchmove", omtouchmove, { passive: true });
 		document.addEventListener("touchend", omtouchend);
 		document.addEventListener("touchcancel", omtouchend);
 	}
 
 	function omtouchmove(e) {
-		const { clientX } = e.touches[0];
-		moveX += lastX - clientX;
+		const { clientX, clientY } = e.touches[0];
+		const deltaX = lastX - clientX;
+		const deltaY = lastY - clientY;
+
+		// Determine if the user is primarily scrolling vertically
+		if (!isScrolling) {
+			isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
+		}
+
+		if (!isScrolling) {
+			moveX += deltaX;
+			e.preventDefault();
+		}
+
 		lastX = clientX;
+		lastY = clientY;
 	}
 
 	function omtouchend() {
 		document.removeEventListener("touchmove", omtouchmove);
 		document.removeEventListener("touchend", omtouchend);
 		document.removeEventListener("touchcancel", omtouchend);
-		if (Math.abs(moveX) <= 100) return;
-		const tabs = Array.from(el.get(".options").children);
-		const currentTab = el.get(".options>span.active");
-		const direction = moveX > 0 ? 1 : -1;
-		const currentTabIndex = tabs.indexOf(currentTab);
-		const nextTabIndex =
-			(currentTabIndex + direction + tabs.length) % tabs.length;
-		tabs[nextTabIndex].click();
-		currentTab.classList.remove("active");
-		tabs[nextTabIndex].classList.add("active");
+
+		// Only change tabs when a significant horizontal swipe is detected and not scrolling vertically
+		if (!isScrolling && Math.abs(moveX) > 100) {
+			const tabs = Array.from(el.get(".options").children);
+			const currentTab = el.get(".options>span.active");
+			const direction = moveX > 0 ? 1 : -1;
+			const currentTabIndex = tabs.indexOf(currentTab);
+			const nextTabIndex =
+				(currentTabIndex + direction + tabs.length) % tabs.length;
+			tabs[nextTabIndex].click();
+			currentTab.classList.remove("active");
+			tabs[nextTabIndex].classList.add("active");
+		}
 	}
 
 	function changeTab(e) {