Fix composer horizontal swipe triggering browser back/forward (#10812)
This commit is contained in:
@@ -134,7 +134,14 @@ import * as Prompt from '#/components/Prompt'
|
|||||||
import * as Toast from '#/components/Toast'
|
import * as Toast from '#/components/Toast'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
import {useAnalytics} from '#/analytics'
|
import {useAnalytics} from '#/analytics'
|
||||||
import {IS_ANDROID, IS_IOS, IS_LIQUID_GLASS, IS_NATIVE, IS_WEB} from '#/env'
|
import {
|
||||||
|
IS_ANDROID,
|
||||||
|
IS_IOS,
|
||||||
|
IS_LIQUID_GLASS,
|
||||||
|
IS_NATIVE,
|
||||||
|
IS_WEB,
|
||||||
|
IS_WEB_SAFARI,
|
||||||
|
} from '#/env'
|
||||||
import {type Gif} from '#/features/gifPicker/types'
|
import {type Gif} from '#/features/gifPicker/types'
|
||||||
import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
|
import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
|
||||||
import {
|
import {
|
||||||
@@ -1219,6 +1226,24 @@ export const ComposePost = ({
|
|||||||
}
|
}
|
||||||
}, [composerState])
|
}, [composerState])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Safari ignores `overscroll-behavior`, so horizontal trackpad swipes over
|
||||||
|
// the composer (e.g. on a quote post) can still trigger the browser's
|
||||||
|
// back/forward navigation gesture. Suppress predominantly-horizontal wheel
|
||||||
|
// events so the history-nav gesture never fires. Chrome and Firefox are
|
||||||
|
// covered by the `overscrollBehaviorX: 'contain'` style on the ScrollView.
|
||||||
|
if (!IS_WEB_SAFARI) return
|
||||||
|
const el =
|
||||||
|
scrollViewRef.current?.getScrollableNode() as unknown as HTMLElement | null
|
||||||
|
if (!el) return
|
||||||
|
const onWheel = (e: WheelEvent) => {
|
||||||
|
if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
el.addEventListener('wheel', onWheel, {passive: false})
|
||||||
|
return () => el.removeEventListener('wheel', onWheel)
|
||||||
|
}, [scrollViewRef])
|
||||||
|
|
||||||
const isLastThreadedPost = thread.posts.length > 1 && nextPost === undefined
|
const isLastThreadedPost = thread.posts.length > 1 && nextPost === undefined
|
||||||
const {
|
const {
|
||||||
scrollHandler,
|
scrollHandler,
|
||||||
@@ -1324,6 +1349,11 @@ export const ComposePost = ({
|
|||||||
web({
|
web({
|
||||||
scrollbarGutter: 'stable',
|
scrollbarGutter: 'stable',
|
||||||
scrollbarColor: `${t.palette.contrast_200} transparent`,
|
scrollbarColor: `${t.palette.contrast_200} transparent`,
|
||||||
|
// Prevent horizontal trackpad swipes from triggering the
|
||||||
|
// browser's back/forward overscroll-navigation gesture.
|
||||||
|
// Handles Chrome and Firefox; Safari is handled separately
|
||||||
|
// via a wheel listener since it ignores overscroll-behavior.
|
||||||
|
overscrollBehaviorX: 'contain',
|
||||||
}),
|
}),
|
||||||
]}
|
]}
|
||||||
keyboardShouldPersistTaps="always"
|
keyboardShouldPersistTaps="always"
|
||||||
|
|||||||
Reference in New Issue
Block a user