diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx index 9bf177f8b..6b4df9932 100644 --- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx @@ -9,7 +9,7 @@ import { } from '@standardnotes/ui-services' import { WebApplication } from '@/Application/WebApplication' import { PANEL_NAME_NOTES } from '@/Constants/Constants' -import { FileItem, PrefKey, WebAppEvent } from '@standardnotes/snjs' +import { FileItem, Platform, PrefKey, WebAppEvent } from '@standardnotes/snjs' import { observer } from 'mobx-react-lite' import { forwardRef, useCallback, useEffect, useMemo } from 'react' import ContentList from '@/Components/ContentListView/ContentList' @@ -305,7 +305,9 @@ const ContentListView = forwardRef( } }, [selectedUuids, innerRef, isCurrentNoteTemplate, renderedItems, panes]) - const [setElement] = usePaneSwipeGesture('right', () => setPaneLayout(PaneLayout.TagSelection)) + const [setElement] = usePaneSwipeGesture('right', () => setPaneLayout(PaneLayout.TagSelection), { + requiresStartFromEdge: application.platform !== Platform.Android, + }) return (
{ export const usePaneSwipeGesture = ( direction: 'left' | 'right', onSwipeEnd: (element: HTMLElement) => void, - gesture: 'pan' | 'swipe' = 'pan', + options?: { + gesture?: 'swipe' | 'pan' + requiresStartFromEdge?: boolean + }, ) => { + const { gesture = 'pan', requiresStartFromEdge = true } = options || {} const application = useApplication() const underlayElementRef = useRef(null) @@ -100,10 +104,11 @@ export const usePaneSwipeGesture = ( const touch = event.touches[0] startX = touch.clientX - if ( + const isStartOutOfThreshold = (direction === 'right' && startX > TouchStartThreshold) || (direction === 'left' && startX < TouchStartThreshold) - ) { + + if (isStartOutOfThreshold && requiresStartFromEdge) { canceled = true return } @@ -197,6 +202,10 @@ export const usePaneSwipeGesture = ( closestScrollContainer.style.overflowY = 'hidden' } + if (document.activeElement) { + ;(document.activeElement as HTMLElement).blur() + } + if (adjustedGesture === 'pan') { const x = direction === 'right' ? Math.max(deltaX - TouchMoveThreshold, 0) : Math.min(deltaX + TouchMoveThreshold, 0) @@ -265,7 +274,7 @@ export const usePaneSwipeGesture = ( element.removeEventListener('touchend', touchEndListener) disposeUnderlay() } - }, [direction, element, isMobileScreen, onSwipeEndRef, isEnabled, adjustedGesture]) + }, [direction, element, isMobileScreen, onSwipeEndRef, isEnabled, adjustedGesture, requiresStartFromEdge]) return [setElement] } diff --git a/packages/web/src/javascripts/Components/Tags/Navigation.tsx b/packages/web/src/javascripts/Components/Tags/Navigation.tsx index 19ff8ba2b..af47a6637 100644 --- a/packages/web/src/javascripts/Components/Tags/Navigation.tsx +++ b/packages/web/src/javascripts/Components/Tags/Navigation.tsx @@ -52,7 +52,9 @@ const Navigation = forwardRef(({ application, className, setPaneLayout(PaneLayout.ItemSelection) element.style.left = '0' }, - 'swipe', + { + gesture: 'swipe', + }, ) const { hasBottomInset } = useAvailableSafeAreaPadding()