title: React webkit controlled-component textarea loses focus on keystroke render
body: <p>I'm writing a React non-native webapp with client-side rendering using the Antd Mobile component library.</p>
  <pre><code>&quot;react&quot;: &quot;^16.13.1&quot;,
  &quot;react-dom&quot;: &quot;^16.13.1&quot;,
  &quot;react-redux&quot;: &quot;^7.2.0&quot;,
  &quot;react-redux-router&quot;: &quot;0.0.14&quot;,
  &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
  &quot;antd&quot;: &quot;^4.4.0&quot;,
  &quot;antd-mobile&quot;: &quot;^2.3.3&quot;,
  </code></pre>
  <p>I have a small form with 2 textareas as controlled components.  When user edits text on a desktop browser (safari, firefox, chrome, etc.) it works fine without losing focus.  But on webkit, the fields lose focus during model update render(). I am using static string keys and have implemented the ref hooks to reset focus and cursor position. After each keystroke the virtual keyboard disappears and the cursor is removed from the textarea. The module is written as a &quot;pure&quot; functional component (rather than class).</p>
  <p>Any ideas why webkit would be having this problem?</p>
  <p>Here is a portion of the code that has the pieces of interest:</p>
  <pre><code>   const useFocus = () =&gt; {
        const htmlElRef = useRef(null);
        const setFocus = () =&gt; {
           htmlElRef.current &amp;&amp; htmlElRef.current.focus();
        };
        return [htmlElRef, setFocus];
     };
  
     const [focusRef, setFocusRef] = useFocus();
  
  [snip]
                key=&quot;myfieldkey&quot;
                 name=&quot;myfield&quot;
                 title=&quot;MyLabel:&quot;
                 ref={focusRef}
                 onChange={(value) =&gt; {
                    let cursorStart =
                       focusRef.current.textareaRef.selectionStart;
                    onFieldChange(value /* update model */ );
                    /* timeout gives reducer time to update model */
                    setTimeout(() =&gt; {
                       setFocusRef();
                       focusRef.current.textareaRef.setSelectionRange(
                          cursorStart,
                          cursorStart
                       );
                    }, 40);
                 }}
  </code></pre>