Editor (input field) loosing focus

[sndp-s]

Context: I have embedded 'typist' in my app which is a extension that attaches to Whatsapp Web.
The typist editor looses focus to whatsapp's chat editor as shown in the video below:

screen-capture-1.webm

The problem doesn't show up in isolated case Here is the snippet I am using in my project:

RichTextKit.configure({
  document: {
    multiline: false,
  },
});

function RichTextInput({ content, onUpdate }) {
  const typistEditorRef = useRef(null);

  const handleUpdate = useEvent(({ getMarkdown }) => {
    onUpdate(getMarkdown());
    typistEditorRef.focus();
  });

  return (
    <TypistEditor
      className="rich-text-input"
      content={content}
      extensions={[RichTextKit]}
      onUpdate={handleUpdate}
      ref={typistEditorRef}
    />
  );
}

<RichTextInput
  content={richTextInputContent}
  onUpdate={setRichTextInputContent}
/>

Here is a clip showing the behaviour with autoFocus prop
screen-capture-autoFocus.webm

[henningmu]

@sandeep-tech without an example to reproduce, this is hard for us to debug / understand. If you could provide one that would greatly help us, help you.

Meanwhile, the handleUpdate function seems to be calling typistEditorRef.focus() which is not possible. Please try using typistEditorRef.current.getEditor().commands.focus() instead. Documentation on commands can be found here.

I'm closing this, assuming the above will work for you. If it doesn't, please feel free to reopen 👍