fix: rm onPointerDown (#9471)

SevereCloud · SevereCloud · commit cbb530e58b4a · 2026-02-11T11:10:26.000+03:00
diff --git a/packages/vkui/src/components/Touch/Touch.tsx b/packages/vkui/src/components/Touch/Touch.tsx
@@ -8,6 +8,53 @@ import { coordX, coordY, touchEnabled, type VKUITouchEvent } from '../../lib/tou
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasComponent, HasRootRef } from '../../types';
 
+interface EventWithType {
+  /**
+   * Тип события.
+   */
+  readonly type: string;
+}
+
+function isTouchEvent(event: EventWithType) {
+  return event.type.startsWith('touch');
+}
+
+type CheckEvent = (event: EventWithType) => void;
+
+type IsEventLock = (event: EventWithType) => boolean;
+
+/**
+ * Телефоны после touch событий могут отправлять события мыши,
+ * Это может происходить при обычном нажатии.
+ *
+ * Нельзя использовать хук во время рендеринга.
+ */
+function useMouseEventLock(): [IsEventLock, CheckEvent] {
+  const isMouseEventLockRef = React.useRef<boolean>(false);
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const isEventLock: IsEventLock = React.useCallback((event: EventWithType) => {
+    return !isTouchEvent(event) && isMouseEventLockRef.current === true;
+  }, []);
+
+  const checkEvent: CheckEvent = React.useCallback((event: EventWithType) => {
+    if (!isTouchEvent(event)) {
+      return;
+    }
+
+    isMouseEventLockRef.current = true;
+
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      isMouseEventLockRef.current = false;
+    }, 1000);
+  }, []);
+
+  React.useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  return [isEventLock, checkEvent];
+}
+
 /**
  * Костыль для правильной работы тайпскрипта.
  */
@@ -236,6 +283,8 @@ export const Touch = ({
   const didSlide = React.useRef(false);
   const disposeTargetNativeGestureEvents = React.useRef<VoidFunction | null>(null);
 
+  const [isEventLock, checkEventForLock] = useMouseEventLock();
+
   const cleanupTargetNativeGestureEvents = () => {
     gestureRef.current = null;
     if (disposeTargetNativeGestureEvents.current) {
@@ -246,10 +295,6 @@ export const Touch = ({
 
   React.useEffect(() => cleanupTargetNativeGestureEvents, []);
 
-  const isTouchEvent = (event: MouseEvent | TouchEvent) => {
-    return event.type.startsWith('touch');
-  };
-
   /**
    * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onEnd`/`onEndX`/`onEndY`.
    */
@@ -339,6 +384,13 @@ export const Touch = ({
   const handlePointerDown = useStableCallback(
     (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement> | TouchEvent) => {
       // Если touchstart сэмулировало mousedown, то заканчиваем обработку
+      if (isEventLock(event)) {
+        return;
+      }
+
+      // Помечаем что произошло touch событие
+      checkEventForLock(event);
+
       if (gestureRef.current !== null) {
         return;
       }
@@ -465,11 +517,6 @@ export const Touch = ({
       // handlePointerDown(onTouchStart устанавливается отдельно через initializeNativeTouchEventStartWithPassiveFalse)
       onMouseDownCapture={useCapture ? handlePointerDown : undefined}
       onMouseDown={!useCapture ? handlePointerDown : undefined}
-      onPointerDown={(event: PointerEvent) => {
-        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
-          event.preventDefault();
-        }
-      }}
     />
   );
 };
diff --git a/packages/vkui/src/components/View/View.stories.tsx b/packages/vkui/src/components/View/View.stories.tsx
@@ -19,6 +19,7 @@ import { Panel } from '../Panel/Panel';
 import { PanelHeader } from '../PanelHeader/PanelHeader';
 import { PanelHeaderBack } from '../PanelHeaderBack/PanelHeaderBack';
 import { Placeholder } from '../Placeholder/Placeholder';
+import { WriteBar } from '../WriteBar/WriteBar';
 import { View, type ViewProps } from './View';
 
 const story: Meta<ViewProps> = {
@@ -84,6 +85,12 @@ const ProfilePanelContent = ({
           ))}
         </HorizontalScroll>
       </Group>
+      <Group
+        header={<Header>WriteBar</Header>}
+        description="Свайпбэк не мешает фокусироваться на элементах форм"
+      >
+        <WriteBar />
+      </Group>
     </React.Fragment>
   );
 };
