From a7b79b3b3a69bdf68163f62521f68697aceb52c2 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Tue, 6 Aug 2024 21:05:08 +0300
Subject: [PATCH] fix(ModalRoot): rm preventTouch() (#7325)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

h2. Описание

В ущерб проблеме, что при сворачивании `ModalPage` и `ModalCard` может вызываться **pull-to-refresh** (см. #3416), удаляем полифил на `overscroll-behavior-y: none` – метод `preventTouch()`.

Удалям по причине не работающих скроллов в интерфейсе – они критичная пробелма, т.к. блокирует действия пользователя.

В PR #6004 добавили установку `overscroll-behavior-y: none` на `html`, поэтому блокирование **pull-to-refresh** будет в браузерах, где это CSS свойство поддерживается (см. [overscroll-behavior-y | Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y#browser_compatibility)).

Добавил сноску в документации `ModalRoot/Readme.md` про это ограничение.

h2. Изменения

- поправил, чтобы `overscroll-behavior-y: none` устанавливался и при первом рендере если `activeModal !== null`;
- удалил свойство `documentScrolling`, т.к. уже не нужен – до этого это условие было полезным, чтобы не плодить события `touchmove`.
---
 .../src/components/ModalRoot/ModalRoot.tsx    | 30 -------------------
 .../vkui/src/components/ModalRoot/Readme.md   | 10 +++++++
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
index 1cfbc03540..a4946f8d99 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
@@ -60,7 +60,6 @@ class ModalRootTouchComponent extends React.Component<
     this.frameIds = {};
   }
 
-  private documentScrolling = false;
   private readonly maskElementRef: React.RefObject<HTMLDivElement>;
   private readonly viewportRef = React.createRef<HTMLDivElement>();
   private maskAnimationFrame: number | undefined = undefined;
@@ -138,47 +137,18 @@ class ModalRootTouchComponent extends React.Component<
 
   /* Отключает скролл документа */
   toggleDocumentScrolling(enabled: boolean) {
-    if (this.documentScrolling === enabled) {
-      return;
-    }
-    this.documentScrolling = enabled;
-
     if (enabled) {
       // восстанавливаем значение overscroll behavior
       // eslint-disable-next-line no-restricted-properties
       this.document.documentElement.classList.remove('vkui--disable-overscroll-behavior');
-
-      // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
-      // https://github.com/VKCOM/VKUI/issues/444
-      this.window.removeEventListener('touchmove', this.preventTouch, {
-        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions нет поля passive
-        passive: false,
-      });
     } else {
       // отключаем нативный pull-to-refresh при открытом модальном окне
       // чтобы он не срабатывал при закрытии модалки смахиванием вниз
       // eslint-disable-next-line no-restricted-properties
       this.document.documentElement.classList.add('vkui--disable-overscroll-behavior');
-
-      this.window.addEventListener('touchmove', this.preventTouch, {
-        passive: false,
-      });
     }
   }
 
-  preventTouch = (event: any) => {
-    if (!event) {
-      return false;
-    }
-    while (event.originalEvent) {
-      event = event.originalEvent;
-    }
-    if (event.preventDefault) {
-      event.preventDefault();
-    }
-    return false;
-  };
-
   checkPageContentHeight() {
     const modalState = this.props.getModalState(this.props.activeModal);
 
diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md
index 83befd6b29..4b9e709e8b 100644
--- a/packages/vkui/src/components/ModalRoot/Readme.md
+++ b/packages/vkui/src/components/ModalRoot/Readme.md
@@ -1,6 +1,16 @@
 `ModalRoot` – контейнер для модальных страниц и карточек.
 Модальные страницы и карточки поддерживают различные жесты: раскрытие на весь экран, закрытие смахиванием вниз.
 
+> ⚠️ **Safari < 16**
+>
+> В мобильной версии [`ModalPage`](#/ModalPage)/[`ModalCard`](#/ModalCard) адаптируется в **Bottom sheets**.
+>
+> В **Safari < 16** их сворачивание может вызвать функцию **pull-to-refresh**. Попытка блокировать это
+> поведение приводит к другим проблемам, например, блокирование скролла (cм. https://github.com/VKCOM/VKUI/issues/335).
+>
+> В **Safari >= 16** проблема с блокированием **pull-to-refresh** решается в одно свойство [`overscroll-behavior-y: none;`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y).
+> Это свойство выставляется на `html` при открытии модального окна и удаляется при закрытии.
+
 ## Структура
 
 Этот компонент должен быть передан в качестве свойства `modal` компоненту [`SplitLayout`](#/SplitLayout).