Реагировать на useref, не добавляя состояние фокуса в поле

Вы можете сделать это в хуке useEffect(). Компонент ниже издевается над вашим сценарием. Когда компонент загружается, я заставляю focus() появляться на входе.

import React, { useEffect, useRef } from 'react';


const UseRefBasics = () => {
  const refContainer = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.info(refContainer.current.value);
  };
  useEffect(() => {
    console.info(refContainer.current);
    refContainer.current.focus();
  });

  return (
    <>
      <form className='form' onSubmit = {handleSubmit}>
        <div>
          <input type='text' ref = {refContainer} />
        </div>
        <button type='submit'>submit</button>
      </form>
    </>
  );
};

export default UseRefBasics;

Это общий сценарий, который я дал. Вы можете использовать useEffect() и получать фокус при обновлении состояния, предоставляя другой аргумент useEffect(()=>{},[state1]) или любым другим способом, который вам нужен.

Я не могу воспроизвести ошибку в настольном браузере. Какой браузер в записи экрана?

function App() {
  const textareaRef = React.useRef();
  const handleClick = () => {
    if (textareaRef.current) {
        console.info('Field clicked');
        textareaRef.current.focus();
    }
  };

  return (
    <div>
      <div onClick = {handleClick}>click me to focus input</div>
      <input
       ref = {textareaRef}
       onFocus = {(e) => e.persist()}
      />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<div id = "root"></div>