Почему не работает ввод текста в Telegram Mini App?
По вводным: есть мини приложение в телеграм
Сейчас ситуация такая: пользователи телефонов Xiaomi и теперь как выяснялось и Samsung (по крайней мере S25), сталкиваются с проблемой ввода текста в поля input и textarea
По вводным: я сам нашёл телефон сяоми и увидел этот баг. И выглядит он так:
Сейчас ситуация такая: при нажатии на поле ввода не открывается клавиатура, при повторном нажатии открывается, но не даёт вводить символы на русском языке, то есть при нажатии на символы тильда просто моргает, но текст не появляется. Если снять фокус с поля ввода и снова нажать на него, то клавиатура сразу открывается и текст можно печатать.
Сейчас ситуация такая: пока решил только с помощью js (снять поставить фокус через 100мс). Но как по мне это дичь.
Нужно понять: возможно есть какие то другие решения?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема ввода в Telegram Mini App на Xiaomi/Samsung чаще всего связана не с вашим input как таковым, а с сочетанием Telegram WebView, Android System WebView, клавиатуры производителя и фокуса внутри WebApp. Поэтому “снять/поставить фокус через 100 мс” выглядит некрасиво, но по сути это распространённый workaround для багов мобильных WebView.
Сначала проверьте базовые вещи в HTML/CSS. Для текстовых полей в Mini App лучше не использовать агрессивные transform/animation у родительских блоков, fixed-контейнеры с нестабильной высотой и перехват touch-событий. Часто ломают ввод такие стили:
transform: translate3d(0,0,0); overflow: hidden; touch-action: none; user-select: none;
Если они стоят на большом контейнере приложения, попробуйте исключить из них область формы.
Для input/textarea задайте нормальные атрибуты:
<input type="text" inputmode="text" autocomplete="off" autocapitalize="none" spellcheck="false">
Если проблема только с русским вводом, проверьте, не стоит ли обработчик
keydown/beforeinput, который фильтрует символы или вызываетpreventDefault(). На мобильных клавиатурах события отличаются от десктопа, и код, который работает на ПК, может блокировать IME-ввод.Более аккуратный workaround вместо хаотичного focus туда-сюда:
function fixTelegramInputFocus(el) { el.addEventListener('touchend', () => { setTimeout(() => { if (document.activeElement !== el) { el.focus({ preventScroll: true }); } }, 80); }, { passive: true }); }function fixTelegramInputFocus(el) { el.addEventListener('touchend', () => { setTimeout(() => { if (document.activeElement !== el) { el.focus({ preventScroll: true }); } }, 80); }, { passive: true }); }
Также обновите Telegram и Android System WebView на тестовых телефонах. На Xiaomi дополнительно влияют MIUI-оптимизации и клавиатура. Проверьте Gboard вместо штатной клавиатуры: если с Gboard ввод работает, это клиентский баг клавиатуры/WebView, а не ваша форма.
Итог: универсального “правильного” решения может не быть, потому что это баг связки Telegram WebView + конкретные Android-оболочки. Но нужно убрать конфликтные CSS/JS, не блокировать input-события, использовать мягкий focus workaround и протестировать на актуальном Telegram/WebView. Такой фикс обычно воспринимается нормально, если он локализован только на поля ввода.