[Bug] IOS верстка, input "date"/"time"

[anatolii-kabanov]

Описание Проблема на IOS. Если у вас несколько инпутов в окне вы можете перемещаться между ними с помощью стрелок виртуальной клавиатуры. Если вы ставите, например, активным инпут типа "text" и с помощью стрелок перемещаетесь вниз на инпут с типом "date" или "time", появляется окно выбора даты, нажимаем ок, и снизу появляется большой отступ в верстке, и как следствие фиксированное меню уже не фексированно.

При переходе с dropdown list не с датой не повторяется.

Шаги воспроизведения Создать несколько инпутов, одни из которых "date" и "time". Первый инпут может быть типа "text". Не нажимать на инпуты "date", а выбрать сначала первый инпут "text", и с помощью виртуальной клавиатуры переметиться к инпуту "date" или "time". Появится IOS окно для выбора даты/времени. Нажимаем ок. После видим что вся верстка съехала, т.е. появляется большой отступ снизу.

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

Скриншоты Опционально.

Пример с воспроизведением https://codesandbox.io/s/vkui-form-inputs-60l6b?file=/src/index.js

[anatolii-kabanov]

В браузере так же появляется отступ.

[ArthurStam]

А какая версия iOS? На 14 эти инпуты сильно переделали и там такой проблемы не наблюдается

[anatolii-kabanov]

Сейчас 14, но и с 12 такая же проблема была. Версия VKUI 3.12.8.

[anatolii-kabanov]

Я прикрепил пример в описании который можно воспроизвести на 14 версии IOS https://codesandbox.io/s/vkui-form-inputs-60l6b?file=/src/index.js

[anatolii-kabanov]

Отеройте пример в браузере на IOS устройстве. Сделайте необходимые шаги и наблюдайте как страница сдвинулась по скроллу.

[inomdzhon]

• VKUI: 7.5.1
• iOS: 18.5

Не смог воспроизвести.

Обновленный код примера

import React from "react";
import ReactDOM from "react-dom/client";
import {
  ConfigProvider,
  AppRoot,
  View,
  Panel,
  PanelHeader,
  Group,
  Header,
  Input,
  Textarea,
  Select,
} from "@vkontakte/vkui";
import "@vkontakte/vkui/dist/vkui.css";

const App = () => {
  const onChange = (e) => {
    console.log(e.target.checked);
  };

  return (
    <View activePanel="main">
      <Panel id="main">
        <PanelHeader>VKUI</PanelHeader>
        <Group header={<Header mode="secondary">Items</Header>}>
          <Input type="text" placeholder="Введите текст" name="eventName" />
          <Textarea
            minLength={1}
            placeholder="Введите текст"
            name="eventDescription"
          ></Textarea>
          <Input
            min={new Date().toISOString().split("T")[0]}
            max={new Date(9999, 11).toISOString().split("T")[0]}
            top="Дата встречи"
            type="date"
            name="eventDate"
          />
          <Input top="Время встречи" type="time" name="eventTime" required />
        </Group>
        <div
          style={{ height: "calc(100vh - var(--panelheader_height_ios))" }}
        ></div>
      </Panel>
    </View>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <ConfigProvider>
    <AppRoot>
      <App />
    </AppRoot>
  </ConfigProvider>
);