Текстовое поле с управляемым компонентом React webkit теряет фокус при рендеринге нажатия клавиш - PullRequest
Новая
       92

Текстовое поле с управляемым компонентом React webkit теряет фокус при рендеринге нажатия клавиш

0 голосов
/ 05 августа 2020

Я пишу неродное веб-приложение React с рендерингом на стороне клиента с использованием библиотеки компонентов Antd Mobile. 

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-redux-router": "0.0.14",
"react-router-dom": "^5.2.0",
"antd": "^4.4.0",
"antd-mobile": "^2.3.3",

У меня есть небольшая форма с двумя текстовыми полями в качестве управляемых компонентов. Когда пользователь редактирует текст в браузере настольного компьютера (safari, firefox, chrome, et c.), Он работает нормально, не теряя фокуса. Но на webkit поля теряют фокус во время обновления модели render (). Я использую строковые ключи stati c и реализовал перехватчики ссылок для сброса фокуса и положения курсора. После каждого нажатия клавиши виртуальная клавиатура исчезает, и курсор удаляется из текстового поля. Модуль написан как «чистый» функциональный компонент (а не класс).

Есть идеи, почему у webkit может быть эта проблема?

Вот часть кода, в которой есть части представляющих интерес: 

   const useFocus = () => {
      const htmlElRef = useRef(null);
      const setFocus = () => {
         htmlElRef.current && htmlElRef.current.focus();
      };
      return [htmlElRef, setFocus];
   };

   const [focusRef, setFocusRef] = useFocus();

[snip]
              key="myfieldkey"
               name="myfield"
               title="MyLabel:"
               ref={focusRef}
               onChange={(value) => {
                  let cursorStart =
                     focusRef.current.textareaRef.selectionStart;
                  onFieldChange(value /* update model */ );
                  /* timeout gives reducer time to update model */
                  setTimeout(() => {
                     setFocusRef();
                     focusRef.current.textareaRef.setSelectionRange(
                        cursorStart,
                        cursorStart
                     );
                  }, 40);
               }}
...