How do I prevent the Toast UI Editor from getting focus when it is rendered

Summary

I have a NextJS app that contains the toast-ui/react-editor. The editor is not visible and I have a button that controls visibility by toggling the show state variable this way:

export function MyEditor({placeholder}) {
const [show, setShow] = useState(false);
const editorRef = useRef(null);

  return (
    <div class="root">
      <div class="editor-container">
        {show && <Editor
              ref={editorRef}
              placeholder={placeholder}
              previewStyle='tab'
              theme='dark'
              minHeight='300px'
              height='300px'
              initialEditType='markdown'
              hooks={{
                addImageBlobHook: onAddImageBlob,
              }}
              autofocus={false}
        />}
      </div>
    </div>
  );
}

Please note that I am passing the autofocus property false but the editor’s text area gets activated as soon as the editor is rendered.

How do I turn it off?

Version

"@toast-ui/editor": "^3.1.0",
"@toast-ui/react-editor": "^3.1.0",

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:9 (3 by maintainers)

Top GitHub Comments

2reactions

suregicommented, Sep 30, 2021

I have the same issue. This happens when previewStyle is the “tab”. Seems ok with “vertical” or when initialEditType is “wysiwyg”. Here’s the simplest dupe code:

<Editor
	previewStyle="tab"
	initialEditType="markdown"
	initialValue={'abc'}
	events={{
		focus: () => {
			console.log('⭐ focus');
		},
	}}
	autofocus={false}
/>

0reactions

livevsonlinecommented, Aug 24, 2022

Oh, its now has an option called autofocus in the oSettings object