[Bug]: При поднятии модалки с автофокусом она прыгает

[ponchicken]

Описание

Если в ModalCard добавить инпут с автофокусом, то при поднятии такой модалки она прыгает вверх

Версия

7.2.0

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

Safari iOS В chrome на Macos, например, тоже есть прыжок, но он еле заметен

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

в ModalCard добавить инпут с автофокусом и открыть её на ios

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

No response

Скриншоты

No response

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

https://codesandbox.io/p/sandbox/hungry-roentgen-zwtlkc

https://github.com/user-attachments/assets/150a9245-8a10-41e3-910e-fa41ccd6d4d2

[EldarMuhamethanov]

В доке по [ModalCard](https://vkcom.github.io/VKUI/#/ModalPage) есть раздел "Как правильно применять параметр autoFocus?". В общем при использовании autofocus на поле ввода ломается анимация открытия. Поэтому рекомендуется устанавливать фокус вручную после открытия модалки(так уже сделано в примере). Также не понял, зачем в примере у ModalCard используется noFocusToDialog - скорее всего его нужно убрать

[ponchicken]

фокус по onOpened то же самое что и отсутствие noFocusToDialog - оно всё делает фокус на инпуте, но с задержкой. По политикам эппла на ios такое не поднимет клавиатуру, а это нужно при фокусе на поле ввода

[inomdzhon]

фокус по onOpened то же самое что и отсутствие noFocusToDialog - оно всё делает фокус на инпуте, но с задержкой

тем не менее, решает ли это проблему с пригающей модалкой?

[ponchicken]

фокус по onOpened то же самое что и отсутствие noFocusToDialog - оно всё делает фокус на инпуте, но с задержкой

тем не менее, решает ли это проблему с пригающей модалкой?

Не решает. Фокус по полю с задержкой клавиатуру на ios не поднимет. отсутствие noFocusToDialog делает фокус с задержкой. Конечно, если клавиатуру не поднимать, не будет и прыжка. Но хотелось бы с клавиатурой, иначе от фокуса на мобилках толку будто нет

[inomdzhon]

фокус по onOpened то же самое что и отсутствие noFocusToDialog - оно всё делает фокус на инпуте, но с задержкой

тем не менее, решает ли это проблему с пригающей модалкой?

Не решает. Фокус по полю с задержкой клавиатуру на ios не поднимет. отсутствие noFocusToDialog делает фокус с задержкой. Конечно, если клавиатуру не поднимать, не будет и прыжка. Но хотелось бы с клавиатурой, иначе от фокуса на мобилках толку будто нет

Сорри, забыл ответить

Не исправилось, потому что autoFocus у <input /> остался (дока https://vkui.io/components/modal-card#faq)

          <Input
            type="number"
            min={0}
            max={9}
            pattern="[0-9]{2}"
            getRef={inputRef}
-            autoFocus
          />

[ponchicken]

если убрать autoFocus и noFocusToDialog, клавиатура на iOS просто не поднимется

[inomdzhon]

если убрать autoFocus и noFocusToDialog, клавиатура на iOS просто не поднимется

К сожалению, Apple специально ограничивает автоматическое открытие клавиатуры на iOS, чтобы предотвратить навязчивые действия со стороны сайтов. Так как поддержать autoFocus, с учётом анимации, возможности нет, мы можем добиться лишь показа состояния.

Ещё стоит иметь ввиду, что автофокус на инпуте при открытии модалки может бить по пользователям с нарушением зрения – фокус сразу падает на поле ввода и скринридер описывает его, пропуская открытие модального окна (тут noFocusToDialog стоит вернуть).

Если по задаче важно открывать модалку с фокусом на инпуте с последующим открытие клавиатуры, то нужно дождаться задачи #8639 в следующей мажорной версии v8.0.0 и тогда использовать autoFocus. Эту задачу закрываю.