fix(plugin-basic-ui,react-ui-core): prevent touch events while transitioning (#584)

Author: orionmiz

.changeset/metal-pandas-dance.md

@@ -0,0 +1,6 @@
+---
+"@stackflow/plugin-basic-ui": patch
+"@stackflow/react-ui-core": patch
+---
+
+fix(plugin-basic-ui,react-ui-core): prevent touch events while transitioning

extensions/plugin-basic-ui/src/basicUIPlugin.css.ts

@@ -115,14 +115,5 @@ export const stackWrapper = recipe({
       android,
       cupertino,
     },
-    globalTransitionState: {
-      idle: {},
-      loading: {
-        pointerEvents: "none",
-      },
-      paused: {
-        pointerEvents: "none",
-      },
-    },
   },
 });

extensions/plugin-basic-ui/src/basicUIPlugin.tsx

@@ -61,7 +61,6 @@ export const basicUIPlugin: (
           className={compact([
             css.stackWrapper({
               theme: initialContext?.theme ?? _options.theme,
-              globalTransitionState: stack.globalTransitionState,
             }),
             _options.rootClassName,
           ]).join(" ")}

extensions/plugin-basic-ui/src/components/AppScreen.tsx

@@ -1,9 +1,10 @@
-import { useActions } from "@stackflow/react";
+import { useActions, useStack } from "@stackflow/react";
 import {
   useActivityDataAttributes,
   useLazy,
   useMounted,
   useNullableActivity,
+  usePreventTouchDuringTransition,
   useStyleEffectHide,
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
@@ -194,6 +195,10 @@ const AppScreen: React.FC<AppScreenProps> = ({
     }
   };
 
+  usePreventTouchDuringTransition({
+    appScreenRef,
+  });
+
   return (
     <Context.Provider
       value={useMemo(

extensions/react-ui-core/src/index.ts

@@ -8,3 +8,4 @@ export * from "./useStyleEffectOffset";
 export * from "./useStyleEffectSwipeBack";
 export * from "./useZIndexBase";
 export * from "./useActivityDataAttributes";
+export * from "./usePreventTouchDuringTransition";

extensions/react-ui-core/src/usePreventTouchDuringTransition.ts

@@ -0,0 +1,27 @@
+import { useStack } from "@stackflow/react";
+import { useEffect } from "react";
+
+export function usePreventTouchDuringTransition({
+  appScreenRef,
+}: {
+  appScreenRef: React.RefObject<HTMLDivElement>;
+}) {
+  const { globalTransitionState } = useStack();
+
+  useEffect(() => {
+    const $appScreen = appScreenRef.current;
+    if (!$appScreen || globalTransitionState === "idle") {
+      return;
+    }
+
+    const onTouchStart = (e: TouchEvent) => {
+      e.preventDefault();
+    };
+
+    $appScreen.addEventListener("touchstart", onTouchStart);
+
+    return () => {
+      $appScreen.removeEventListener("touchstart", onTouchStart);
+    };
+  }, [globalTransitionState]);
+}