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

[benderillo]

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",

[js87zz]

@benderillo Can you give me your example in code sandbox? When I tested in a react environment, there was no focus problem.

[benderillo]

@js87zz https://codesandbox.io/s/react-typescript-forked-4exdi?file=/src/editor.tsx

When the editor is shown, the focus is in the text area.

[js87zz]

@benderillo I checked the issue. Thanks for reporting!

[suregi]

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}
/>

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[volkflo]

Did somebody found a solution for that? :)

[volkflo]

I am not very familiar with your codebase, but from a quick view and debug session I would assume/guess that: https://github.com/nhn/tui.editor/blob/253a9a086f5a8ff76a1f7a4be5e104c0b0e44b8c/apps/editor/src/base.ts#L172-L178 The scrollIntoView should be probably inside the if - block. I guess the expected behaviour of autoFocus: false would be that the page does not scroll as well (See video in #1945).

I hope that helps a little bit.

[js87zz]

@benderillo The bug has been fixed in v3.1.2. Thanks for long waiting!

[livevsonline]

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

[skerit]

Even though the autofocus doesn't happen anymore, the scrollIntoView still gets executed. https://github.com/nhn/tui.editor/blob/0c5c11bac0b9954e2cac2ff2a081ce8c80a5f14d/apps/editor/src/base.ts#L199

[vilyus]

Hello, I am also suffering from this automatic scroll problem with disabled autofocus. Is there any chance this issue could be reopened? Or, maybe, it is better to report it in another issue here?

[csculley]

I'm also seeing this behavior in Toast version 3.2.2 with autofocus: false

[xen]

I have the same problem. Setting autofocus: false doesn't affect editor. It still grabs the focus.

[zeturn]

same question

You see, here is my development service : https://pilipala.ml/wall/C++. Once you enter this page, the editor will catch the focus. And here is my app.js:

import '@toast-ui/editor/dist/toastui-editor.css';

const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '400px',
  initialEditType: 'markdown',
  placeholder: '6!',
  language: 'zh-CN',
  autofocus: false,
})

​Did I make some mistakes in this instance? Thank you : )

[tfolk]

Same here

[csculley]

@js87zz I'm not sure that this bug was fixed completely, could this issue be reopened? Right now there are 6 reports of this issue still existing

[zeturn]

I placed autofocus: false in the middle and re executed npm run dev and it works, which is strange

this is my app.js

//tui editor
import Editor from '@toast-ui/editor'
//import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '300px',
  initialEditType: 'markdown',
  autofocus : false,
  placeholder: '发表见解',
  language: 'zh-CN',
})

In addition, the United States has removed the. ml domain name, which means that the website I mentioned (pilipala.ml) cannot be used. That domain name has been with me for 5 years

[tfolk]

autofocus: false works for me!

[seungwoncode]

"@toast-ui/react-editor": "^3.2.3"

autoFocus is not working for me .

I solved the problem by correcting it in the following way.

 useEffect(() => {
    if (editorRef.current) {
      const timeoutBlur = setTimeout(() => {
        editorRef.current?.getInstance().blur();
      }, 0);

      return () => {
        clearTimeout(timeoutBlur);
      };
    }
  }, [editorRef, content]);

Among the other methods I've applied, I've given focus elsewhere and removed it, but maybe because the TUI editor is slow to load, when the editor is rendered at the end, it's unconditionally focused on editor. So I chose to deal with it inside useEffect.