ios – Contenteditable div would not concentrate on iPad utilizing requestAnimationFrame

I am engaged on a React app that features contenteditable divs. I am attempting to implement a function the place clicking a button toggles the modifying state of the div, after which the div is routinely centered utilizing requestAnimationFrame. The code I’ve works tremendous on desktop and Android units, however on iPad the main target would not appear to work reliably. This is the code I am utilizing:

operate Edit({wait}){
  const [isEditing, setEditing] = useState(false);
  return (
    <div className="field">
      <h1>{isEditing&&<>Editable </>}Content material</h1>

      <div
        contentEditable={isEditing}
        ref={async (component) => {
          if (!component) {
            return;
          }

          if (!isEditing) {
            return;
          }
          
          await wait();

          component.focus();
        }}
      >
        Foo <b>bar</b>
      </div>
      <br/>
      <button
        onClick={() => {
          setEditing(!isEditing)
        }}
        className="button"
      >
        Toggle edit
      </button>
    </div>
  );
}



operate App() {
  return (
    <div className="field">
      <Edit wait={()=>void(0)} />
      <Edit wait={forAnimationFrame} />
     </div>
  );
}

This works tremendous on desktop and Android units, however on iPad/iPhone the main target would not appear to work reliably – it doesn’t set off the keyboard. I’ve tried a couple of totally different approaches, together with utilizing setTimeout as a substitute of requestAnimationFrame, utilizing the press occasion as a substitute of touchstart, and eradicating the delay completely, however nothing appears to work constantly on iPad. Can anybody recommend an answer or present some steerage on what is likely to be inflicting this problem? Thanks upfront in your assist.