Неудобно работать с клавиатурой в ModalPage на iOS #3792

shevchux · 2022-12-13T19:37:36Z

shevchux
Dec 13, 2022

Вводная

Важная iOS особенность, которую нужно учитывать в библиотеке: при подъеме клавиатуры вьюпорт не уменьшается, а уезжает за пределы экрана. Как следствие, при поднятой клавиатуре образуется дополнительный скролл, который позволяет проскроллить так называемый visualViewport.

Описание проблемы

Неудобно работать с клавиатурой в ModalPage на iOS, если внутри ModalPage есть много скролящегося контента. Конфликтуют кастомный скролл внутри ModalPage и скролл iOS visualViewport. Высокий шанс свернуть ModalPage при попытке скролльнуть вверх.

Окружение
Любой iOS. Любой VKUI.
Воспроизводится в мини-приложениях как в нативном клиенте, так и в браузере (Chrome, Safari).

Пример с кодом
https://codesandbox.io/s/zealous-currying-lgcyss?file=/src/index.js

Видео

Демо

IMG_6065.MP4

2-3 сек: Делаем скролл вниз. Не удается доскролить до низа внутреннего скролла ModalPage. Так как часть вьюпорта под клавиатурой.
3-4 сек: Необходимо сделать паузу, чтобы взять управление над скроллом visualViewport (Проблема 1. Неудобно)
5-7 сек: Делаем скролл вверх. Не удается доскролить до верха скролла ModalPage. Так как часть вьюпорта выше физического экрана.
8-9 сек: Необходимо сделать паузу, чтобы взять управление над скроллом visualViewport (Проблема 2. Случайно закрываем модалку, не получаем желаемый результат. Решение Мастхэв.)

Предлагаемое решение

Использовать visualViewport API. При поднятой клавиатуре скролл-боксу внутри ModalPage добавить нижний отступ, чтобы скролл на шаге видео "2-3 сек" работал сразу. Опираться на vkBridge инсет (который шлет только клиент ВК) не предлагаю, так как решение напрашивается и для браузеров.
Так же после шага видео "2-3 сек" нужно запретить скролл visualViewport, чтобы избежать проблем после шага видео "3-4 сек" (остальные автоматом будут не актуальны). Напрямую это не сделать никак, только через превент touchMove (если мы уже в нижнем положении скролла ModalPage – превентить touchMove вниз, чтобы не брать управление над скроллом visualViewport)

Альтернативное простое решение

Запретить при поднятой клавиатуре закрывать модалку жестом вниз. Проблемы с необходимостью делать паузу останутся, но хотя бы решится мастхэв проблема 2, предотвратим случайное сворачивание.
Идея пересекается с запросом https://github.com/VKCOM/VKUI/issues/3628.

Test Cases

(!!!) Учесть случай, когда поле ввода находится не вверху модалки, но и в её середине или внизу. В этом случае iPhone постарается сделать перемещение visualViewport так, как он сам пожелает оптимальным. С этим надо как-то уживаться, возможно еще решение выше не полностью продумано.
Помнить, что высота клавиатуры может меняться, например, когда переключаешься между вводом текста и emoji
Не помешала бы корректная работа FixedLayout vertical="bottom" внутри модалки. В этом случае понадобится переопределить safe-area-inset-bottom на величину клавиатуры. Но не глобально, а в области стилей ModalPage.

shevchux · 2022-12-13T20:02:29Z

shevchux
Dec 13, 2022
Author

Test Case 1. В интернете описывают лайфхаки, как предотвратить автоматическое перемещение visualViewport: перед фокусировкой надо на долю секунды перенести поле ввода очень высоко (transform) и вернуть обратно. Кстати, на этом приёме работает мессенджер внутри VK Знакомств (обратите внимание, как интерфейс вписывается под клавиатуру, при этом visualViewport не уезжает, шапка продолжает быть видна)

0 replies

k-egor-smirnov · 2022-12-13T20:08:16Z

k-egor-smirnov
Dec 13, 2022
Collaborator

Как раз для таких целей делали библиотеку https://github.com/VKCOM/IOSDevice
Возможно, стоит ее допилить и написать пример использования в VKUI

1 reply

shevchux Dec 13, 2022
Author

Мне еще понравился такой источник. Можно подцепить чего.
https://github.com/adamjgrant/a-viewport-that-works

inomdzhon · 2022-12-20T10:42:14Z

inomdzhon
Dec 20, 2022
Collaborator

Использовать visualViewport API. При поднятой клавиатуре скролл-боксу внутри ModalPage добавить нижний отступ, чтобы скролл на шаге видео "2-3 сек" работал сразу.

Пока не совсем понял как это должно работать 🤔

7 replies

inomdzhon Dec 21, 2022
Collaborator

Такое решение будет сегодня вечером в проде vk.com/dating в фильтрах, в выборе города.

Сможешь плиз маякнуть когда зарелизити?

shevchux Dec 21, 2022
Author

Можно смотреть. Фильтры, выбор города.

IMG_6162.MOV

shevchux Dec 21, 2022
Author

Только на бридже, только внутри клиента пока

inomdzhon Dec 21, 2022
Collaborator

Ты .vkuiModalPage__content задаёшь margin-bottom или как?

shevchux Dec 21, 2022
Author

margin-bottom у vkuiModalPage__content-wrap. Зануляю padding-bottom (равен --safe-area-inset-bottom) у ModalPage__content-in. Переопределяю --safe-area-inset-bottom у ModalPage__content-in высотой клавиатуры. Таким образом, если понадобится использовать FixedLayout внутри, оно норм приживётся.

Хук с фиксом. Хук возвращает реф. Реф вешаешь на проп getModalContentRef у ModalPage.

Details

import { useEffect, useRef } from 'react';
import { useIPhoneKeyboardState } from 'src/hooks/useIPhoneKeyboardState';

export function useModalPageKeyboardSafe() {
  const modalContentRef = useRef<HTMLDivElement>(null);
  const iOSKeyboardState = useIPhoneKeyboardState();

  useEffect(() => {
    const modalContentEl = modalContentRef.current;
    const modalContentInEl = modalContentEl?.firstElementChild as HTMLDivElement | undefined;
    const modalContentWrapEl = modalContentEl?.parentElement;

    if (!modalContentEl || !modalContentInEl || !modalContentWrapEl) {
      return;
    }

    if (iOSKeyboardState.supports && iOSKeyboardState.opened) {
      modalContentWrapEl.style.marginBottom = `${iOSKeyboardState.height}px`;
      modalContentWrapEl.style.transition = `margin-bottom 0.5s ease`;
      modalContentInEl.style.paddingBottom = '0';
      modalContentInEl.style.setProperty('--safe-area-inset-bottom', `${iOSKeyboardState.height}px`);

      let startTouchClientY = 0;

      const touchStartListener = (e: TouchEvent) => {
        startTouchClientY = e.changedTouches[0].clientY;
      };

      const touchMoveListener = (e: TouchEvent) => {
        const { scrollHeight, scrollTop, offsetHeight } = modalContentEl;
        const isScrolledToBottom = offsetHeight + scrollTop >= scrollHeight;
        const hasNotScroll = offsetHeight >= scrollHeight;
        const isScrolledToTop = scrollTop <= 0;

        const shiftY = e.changedTouches[0].clientY - startTouchClientY;
        const isMoveToBottom = shiftY < 0;
        const isMoveToTop = shiftY > 0;

        if (hasNotScroll || (isMoveToBottom && isScrolledToBottom) || (isMoveToTop && isScrolledToTop)) {
          e.preventDefault();
        }
      };

      modalContentWrapEl.addEventListener('touchmove', touchMoveListener, { capture: true });
      modalContentWrapEl.addEventListener('touchstart', touchStartListener, { capture: true });

      return () => {
        modalContentWrapEl.removeEventListener('touchmove', touchMoveListener, { capture: true });
        modalContentWrapEl.removeEventListener('touchstart', touchStartListener, { capture: true });
      };
    }

    modalContentWrapEl.style.transition = '';
    modalContentWrapEl.style.marginBottom = '';
    modalContentInEl.style.paddingBottom = '';
    modalContentInEl.style.removeProperty('--safe-area-inset-bottom');
  }, [iOSKeyboardState]);

  return modalContentRef;
}

useIphoneKeyboardState – хук с интерфейсом { supports: false } | { supports: true; height: number; opened: boolean }.

Этот способ в текущей реализации будет работать только если поле ввода расположено вверху полно-раскрытой модалки. Если поле ввода будет где-то внизу, нативный iOS сделает автоподстролл visibleViewport туда, куда он посчитает нужным. С этим бороться еще сложнее. Кажется лучше добиться автозакрытия клавиатуры при touchStart на внешнюю область + запретить сворачивание модалки при открытой клавиатуре

inomdzhon · 2022-12-20T10:42:17Z

inomdzhon
Dec 20, 2022
Collaborator

А что если мы будем скрывать клавиатуру если пользователь "увёл" фокус с поля? Например, как в системе iOS или в Yandex.Go

4 replies

shevchux Dec 21, 2022
Author

Сразу touchstart любой области кроме поля ввода и клавиатуры? Гений. Нравится. Легкое решение, которого должно быть достаточно, чем делать довольно сложные понты. Главное это более нативно. ВК в любых местах, где есть поиск, делает аналогично.

inomdzhon Dec 21, 2022
Collaborator

Угу

Демо-видео

discussions-3792.MP4

Код из Демо-видео по ссылке https://codesandbox.io/s/vkui-discussions-3792-bottom-sheet-crlmv

⚠️ Фиксированная шапка с полем ввода

см. 00:15 минуту в Демо-видео

Делаем фокус на поле | <клавиатура показалась>
Листаём контент, чтобы он продолжал прокручиваться | <клавиатура скрылась>
Докручиваем контент, который уже был процессе прокрутки
Делаем фокус на поле | <клавиатура показалась>
Продолжаем докручивать контент | ⚠️ <клавиатура НЕ скрывается>

Итог: пока скрол не остановится touchstart не сработает

shevchux Dec 21, 2022
Author

При поднятой виртуальной клавиатуре создать создать слой, который будет ловить клик?

inomdzhon Dec 21, 2022
Collaborator

При поднятой виртуальной клавиатуре создать создать слой, который будет ловить клик?

Вариант, но тогда нужно делать его из нескольких частей, чтобы само поле не перекрывалось этим слоем

То, что touchstart не вызывается при действующем скролле извеcтная проблема оказывается https://developer.apple.com/forums/thread/99316

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Неудобно работать с клавиатурой в ModalPage на iOS #3792

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 12 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Неудобно работать с клавиатурой в ModalPage на iOS #3792

shevchux Dec 13, 2022

Replies: 4 comments · 12 replies

shevchux Dec 13, 2022 Author

k-egor-smirnov Dec 13, 2022 Collaborator

shevchux Dec 13, 2022 Author

inomdzhon Dec 20, 2022 Collaborator

inomdzhon Dec 21, 2022 Collaborator

shevchux Dec 21, 2022 Author

shevchux Dec 21, 2022 Author

inomdzhon Dec 21, 2022 Collaborator

shevchux Dec 21, 2022 Author

inomdzhon Dec 20, 2022 Collaborator

shevchux Dec 21, 2022 Author

inomdzhon Dec 21, 2022 Collaborator

⚠️ Фиксированная шапка с полем ввода

shevchux Dec 21, 2022 Author

inomdzhon Dec 21, 2022 Collaborator

shevchux
Dec 13, 2022

Replies: 4 comments 12 replies

shevchux
Dec 13, 2022
Author

k-egor-smirnov
Dec 13, 2022
Collaborator

shevchux Dec 13, 2022
Author

inomdzhon
Dec 20, 2022
Collaborator

inomdzhon Dec 21, 2022
Collaborator

shevchux Dec 21, 2022
Author

shevchux Dec 21, 2022
Author

inomdzhon Dec 21, 2022
Collaborator

shevchux Dec 21, 2022
Author

inomdzhon
Dec 20, 2022
Collaborator

shevchux Dec 21, 2022
Author

inomdzhon Dec 21, 2022
Collaborator

shevchux Dec 21, 2022
Author

inomdzhon Dec 21, 2022
Collaborator