[Bug][Cell]: в draggable режиме не работает автоскролл если у родителя нет height: 100%

[inomdzhon]

Описание

Если нет повсеместного height: 100%, начинаю с html и body, то в <Cell draggable /> не работает автоскролл при перетаскивании к низу области видимости.

Видео с воспроизведением

before.mov

Нюанс

Если расставить height: 100%, то автоскролл починиться, но это решение подходит для всех приложений. На видео ниже пример, где height: 100% ломает страницу.

Видео c воспроизведением, где расставленн `height: 100%`

after.mov

Версия

= 5.10.0

В каких браузерах воспроизводится проблема?

No response

Шаги воспроизведения

1. Использовать <App mode="partial" />.
2. Создать список элементов из <Cell draggable />, чтобы на странице появился скролл.
3. Попробовать перетащить один из элементов <Cell draggable /> к нижнему краю области видимости
4. ❌ Страница не автоскролится вниз.

Ожидаемое поведение

Страница автоскролится вниз.

[inomdzhon]

Workaround

/**
 * TODO [@vkontakte/vkui>=5.10.1] Удалить этот патч.
 *
 * [Workaround для VKUI v5.10.0]
 *
 * В VKUI v5.10.0 у `Cell` в режиме `draggable` добавили вертикальный автоскролл страницы, если мы тащим элемент к краю области видимости.
 *
 * НО! Текущая реализация не учитывает, что на странице может не использоваться `html, body { height: 100% }` (или `height: 100vh`).
 *
 * Поэтому мы временно, пока ждём фикса от VKUI, перебиваем `height` у `document.documentElement.getBoundingClientRect()` на `document.documentElement.clientHeight`.
 *
 * @see https://github.com/VKCOM/VKUI/releases/tag/v5.10.0
 */
const patchDocumentElementGetBoundingClientRectFn = () => {
  const origin = document.documentElement.getBoundingClientRect.bind(document.documentElement);
  
  Object.defineProperty(document.documentElement, 'getBoundingClientRect', {
    writable: true,
    value: () => {
      const patchedHeight = document.documentElement.clientHeight;
  
      const { x, y, width } = origin();
  
      return DOMRect.fromRect({ x, y, width, height: patchedHeight });
    },
  });

  return function cleanup() {
    Object.defineProperty(document.documentElement, 'getBoundingClientRect', {
      writable: true,
      value: origin,
    });
  };
}

[vkcom-publisher]

✅ v5.10.1 🎉

[vkcom-publisher]

✅ v6.0.1 🎉