authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-15 00:12:22-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-15 00:12:22-07:00
log6ecc15fa25c808922a58f07377add25b55d9ac90
tree41a4d185051401c7e871f5d50ff07b097814e67a
parent9ea892e3b365faff31eed294ac38f70d122656b2
signature Signed by PGP key B5690EEEBB952194

fix(mobile): restrict row highlighting to pointer input (#11863)

2 files changed, 7 insertions(+), 5 deletions(-)

apps/mobile/src/components/RowPressable.tsx+2-2
...@@ -5,7 +5,7 @@ import { GestureDetector } from "react-native-gesture-handler";...@@ -5,7 +5,7 @@ import { GestureDetector } from "react-native-gesture-handler";
5import { cn } from "../lib/cn";5import { cn } from "../lib/cn";
6import { useHoverGesture } from "../lib/useHoverGesture";6import { useHoverGesture } from "../lib/useHoverGesture";
77
8/** Shared row feedback, layered over the background so selection stays visible. */8/** Pointer feedback layered over selection. Touch-down may be the start of a scroll. */
9export function RowPressable({9export function RowPressable({
10 children,10 children,
11 className,11 className,
...@@ -24,7 +24,7 @@ export function RowPressable({...@@ -24,7 +24,7 @@ export function RowPressable({
24 <View24 <View
25 pointerEvents="none"25 pointerEvents="none"
26 className={cn("absolute inset-0", interactionClassName)}26 className={cn("absolute inset-0", interactionClassName)}
27 style={{ opacity: props.disabled ? 0 : pressed ? 0.2 : hovered ? 0.1 : 0 }}27 style={{ opacity: props.disabled || !hovered ? 0 : pressed ? 0.2 : 0.1 }}
28 />28 />
29 {children}29 {children}
30 </>30 </>
apps/mobile/src/lib/useHoverGesture.ts+5-3
...@@ -1,5 +1,5 @@...@@ -1,5 +1,5 @@
1import { useMemo, useState } from "react";1import { useMemo, useState } from "react";
2import { Gesture } from "react-native-gesture-handler";2import { Gesture, PointerType } from "react-native-gesture-handler";
33
4/** Uses native hover recognition without React Native's optional pointer-event flags. */4/** Uses native hover recognition without React Native's optional pointer-event flags. */
5export function useHoverGesture(disabled = false) {5export function useHoverGesture(disabled = false) {
...@@ -12,8 +12,10 @@ export function useHoverGesture(disabled = false) {...@@ -12,8 +12,10 @@ export function useHoverGesture(disabled = false) {
12 // Observe hover without competing with row taps, scrolling, or swipe actions.12 // Observe hover without competing with row taps, scrolling, or swipe actions.
13 .cancelsTouchesInView(false)13 .cancelsTouchesInView(false)
14 .runOnJS(true)14 .runOnJS(true)
15 .onBegin(() => {15 .onBegin((event) => {
16 setHovered(true);16 setHovered(
17 event.pointerType === PointerType.MOUSE || event.pointerType === PointerType.STYLUS,
18 );
17 })19 })
18 .onFinalize(() => {20 .onFinalize(() => {
19 setHovered(false);21 setHovered(false);