fix: disable Telegram swipe-to-close globally to prevent accidental app closures

This commit is contained in:
c0mrade
2026-02-02 00:55:39 +03:00
parent 09584fc901
commit 9b0be280d2
4 changed files with 14 additions and 72 deletions

View File

@@ -7,12 +7,10 @@ import {
useContext,
useState,
useCallback,
useEffect,
} from 'react';
import { cn } from '@/lib/utils';
import { usePlatform } from '@/platform';
import { useBackButton } from '@/platform';
import { useTelegramSDK } from '@/hooks/useTelegramSDK';
import {
backdrop,
backdropTransition,
@@ -140,26 +138,9 @@ export const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(
const { open, onClose } = useContext(SheetContext);
const { haptic } = usePlatform();
const dragControls = useDragControls();
const { disableVerticalSwipes, enableVerticalSwipes, isTelegramWebApp } = useTelegramSDK();
// Back button integration
useBackButton(open ? onClose : null);
// Disable Telegram vertical swipes when sheet is open (prevents conflict with drag gestures)
useEffect(() => {
if (!isTelegramWebApp) return;
if (open) {
disableVerticalSwipes();
}
return () => {
if (open) {
enableVerticalSwipes();
}
};
}, [open, isTelegramWebApp, disableVerticalSwipes, enableVerticalSwipes]);
const handleDragEnd = useCallback(
(_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
const velocity = info.velocity.y;

View File

@@ -2,7 +2,6 @@ import { useEffect, useRef, useCallback, useState, type ReactNode } from 'react'
import { createPortal } from 'react-dom';
import { useBackButton } from '@/platform';
import { useHaptic } from '@/platform';
import { useTelegramSDK } from '@/hooks/useTelegramSDK';
export interface SheetProps {
isOpen: boolean;
@@ -105,26 +104,10 @@ export function Sheet({
const [isVisible, setIsVisible] = useState(false);
const haptic = useHaptic();
const { disableVerticalSwipes, enableVerticalSwipes, isTelegramWebApp } = useTelegramSDK();
// BackButton integration
useBackButton(isOpen ? onClose : null);
// Disable Telegram vertical swipes when sheet is open (prevents conflict with drag gestures)
useEffect(() => {
if (!isTelegramWebApp) return;
if (isOpen) {
disableVerticalSwipes();
}
return () => {
if (isOpen) {
enableVerticalSwipes();
}
};
}, [isOpen, isTelegramWebApp, disableVerticalSwipes, enableVerticalSwipes]);
// Calculate current height based on snap point
const currentHeight = `${snapPoints[currentSnapIndex] * 100}vh`;

View File

@@ -1,50 +1,25 @@
import { useCallback, useRef } from 'react';
import { useCallback } from 'react';
import { useTelegramSDK } from './useTelegramSDK';
/**
* Hook to manage Telegram vertical swipes during drag-and-drop operations.
* Disables Telegram's swipe-to-close gesture while dragging to prevent conflicts.
*
* Usage with @dnd-kit:
* ```tsx
* const { onDragStart, onDragEnd } = useTelegramDnd();
*
* <DndContext
* onDragStart={(e) => {
* onDragStart();
* // your drag start logic
* }}
* onDragEnd={(e) => {
* onDragEnd();
* // your drag end logic
* }}
* >
* ```
* Hook for drag-and-drop operations in Telegram Mini App.
* Note: Vertical swipes are now globally disabled at app init,
* so this hook just provides no-op callbacks for compatibility.
*/
export function useTelegramDnd() {
const { disableVerticalSwipes, enableVerticalSwipes, isTelegramWebApp } = useTelegramSDK();
const isDraggingRef = useRef(false);
const { isTelegramWebApp } = useTelegramSDK();
const onDragStart = useCallback(() => {
if (isTelegramWebApp && !isDraggingRef.current) {
isDraggingRef.current = true;
disableVerticalSwipes();
}
}, [isTelegramWebApp, disableVerticalSwipes]);
// No-op: swipes are globally disabled
}, []);
const onDragEnd = useCallback(() => {
if (isTelegramWebApp && isDraggingRef.current) {
isDraggingRef.current = false;
enableVerticalSwipes();
}
}, [isTelegramWebApp, enableVerticalSwipes]);
// No-op: swipes are globally disabled
}, []);
const onDragCancel = useCallback(() => {
if (isTelegramWebApp && isDraggingRef.current) {
isDraggingRef.current = false;
enableVerticalSwipes();
}
}, [isTelegramWebApp, enableVerticalSwipes]);
// No-op: swipes are globally disabled
}, []);
return {
onDragStart,

View File

@@ -67,6 +67,9 @@ export function initTelegramSDK() {
// Disable closing confirmation by default
tg.disableClosingConfirmation?.();
// Disable vertical swipes to prevent accidental closures
tg.disableVerticalSwipes?.();
// Auto-enter fullscreen if enabled in settings (mobile only)
const fullscreenEnabled = getCachedFullscreenEnabled();
if (fullscreenEnabled && isTelegramMobile() && tg.requestFullscreen) {