Проблема мобильного браузера с изменением размера textarea

Я работаю в React.js и имею элементы textarea которые динамически расширяются и сжимаются в зависимости от размера пользовательского ввода. Предполагаемая функциональность заключается в следующем:

Working correctly in a desktop context

Это работает правильно в контексте рабочего стола. Однако на любом мобильном телефоне или планшете в современном браузере (проверенные Safari, Chrome и Firefox) элемент textarea только расширяется, он не сжимается при удалении контента.

Сначала я подумал, что это может иметь какое-то отношение к обработчику onChange я использовал, однако та же проблема остается при замене его с помощью обработчика onInput. Поэтому я считаю, что проблема заключается в методе resize().

У кого-нибудь есть идея, почему я испытываю эту проблему?

Я создал скрипку без стилей, чтобы поделиться с вами основными функциями. Интересно, что ошибка не возникает в симуляторе JSFiddle на мобильном устройстве, но если вы возьмете тот же код и поместите его в другую реагирующую среду, ошибка возникнет на мобильном устройстве в современных браузерах.

https://jsfiddle.net/o4aLfd21/6/

Спасибо заранее

Ответ 1

Проблема в том, что вы изменяете DOM напрямую (или пытаетесь) вместо изменения состояния и позволяете React работать правильно. Вы изменяете свойства элементов DOM в resize() затем любое входное изменение немедленно вызовет handleChange(e) и перенаправляет ваш DOM, перезаписывая изменения.

НИКОГДА НЕ СМЕШАЙТЕСЬ С DOM TOUCHING !!!

Измените вашу функцию изменения resize чтобы она работала как handleChange(e) и установите переменные в состоянии, которые управляют этими свойствами во время render() разметки.