Skip to content

Commit

Permalink
fix(ModalRoot): rm preventTouch() (#7325)
Browse files Browse the repository at this point in the history
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`.
  • Loading branch information
inomdzhon authored Aug 6, 2024
1 parent 1dc1408 commit a7b79b3
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 30 deletions.
30 changes: 0 additions & 30 deletions packages/vkui/src/components/ModalRoot/ModalRoot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);

Expand Down
10 changes: 10 additions & 0 deletions packages/vkui/src/components/ModalRoot/Readme.md
Original file line number Diff line number Diff line change
@@ -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).
Expand Down

0 comments on commit a7b79b3

Please sign in to comment.