Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to cancel auto focus after initialization? #1730

Closed
big-dream opened this issue Aug 4, 2021 · 11 comments · Fixed by #1772
Closed

How to cancel auto focus after initialization? #1730

big-dream opened this issue Aug 4, 2021 · 11 comments · Fixed by #1772
Labels
Enhancement Enhance performance or improve usability of original features. Question

Comments

@big-dream
Copy link

Summary

Now that the TOAST UI Editor instance is created, it will automatically focus the browser on the editor, which will affect the user experience. This is not the case with the v2 version. How can I cancel the auto focus?

Screenshots

c0ef40d3-0eff-48f8-84fb-8a5ba3256dad

Version

3.0.1

Additional context

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
    <style>
        #content {
            text-align: center;
            font-size: 10em;
            background-color: #eee;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="content">1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10</div>
    <div id="editor"></div>
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
    <script>
        window.onload = function() {
            const editor = new toastui.Editor({
                el: document.querySelector('#editor'),
                previewStyle: 'vertical',
                height: '500px',
                initialValue: 'hello world'
            });
        }
    </script>
</body>
</html>
@ats1999
Copy link
Contributor

ats1999 commented Aug 4, 2021

Use this API, https://nhn.github.io/tui.editor/latest/ToastUIEditorCore#blur

@big-dream
Copy link
Author

Use this API, https://nhn.github.io/tui.editor/latest/ToastUIEditorCore#blur

I tried to use it in this way, but it couldn't achieve the expected effect. Although the focus is cancelled, the page has scrolled to the position of the editor instead of staying at the top of the page. I don't know if it is used incorrectly.

const editor = new toastui.Editor({
    el: document.querySelector('#editor'),
    previewStyle: 'vertical',
    height: '500px',
    initialValue: 'hello world'
});
editor.blur();

@ats1999
Copy link
Contributor

ats1999 commented Aug 4, 2021

I think it can not be solved via API because we can only call .blur() method after initialization of the editor. But, then page might have been scrolled.

@js87zz It needs to be solved via props, like autoFocus

@js87zz
Copy link
Contributor

js87zz commented Aug 5, 2021

@big-dream @ats1999
I checked it.
I'll think about how to fix this operation. It does look good to control as an option.
Thank you!

@js87zz js87zz added the Enhancement Enhance performance or improve usability of original features. label Aug 5, 2021
@azmeuk
Copy link
Contributor

azmeuk commented Aug 23, 2021

This issue is a blocker for me, since it prevents toast-ui editor to integrate with the rest of my UI, as it steals the focus.

@azmeuk azmeuk mentioned this issue Aug 23, 2021
Merged
js87zz pushed a commit that referenced this issue Aug 30, 2021
@azmeuk
feat: add an 'autofocus' option that can disable initial focus (close #…
6bab7db 
…1730) (#1772)

Without this option, the editor always catches the focus on
initialization, making it possibly incompatible with other elements on
the page that also need the focus at startup.
@js87zz
Copy link
Contributor

js87zz commented Sep 7, 2021

@big-dream
The autofocus option has been added in v3.1.0. Thanks for @azmeuk.

@seanwang1998
Copy link

@js87zz
image
I set autofocus to false, but the cursor remains in the editor after the page loads

@azmeuk
Copy link
Contributor

azmeuk commented Dec 13, 2021

Can you try #2030 to see if it fixes your problem?

@seanwang1998
Copy link

So the authorities are still working on it? I am currently using NPM install V3.1.0 is there a temporary fix?

@seanwang1998
Copy link

@azmeuk

@n3storm
Copy link

n3storm commented Dec 1, 2022

This is working per version 3.2.1, though I could not find it documented

ahamelers pushed a commit to ahamelers/tui.editor that referenced this issue Aug 21, 2023
@azmeuk
feat: add an 'autofocus' option that can disable initial focus (close n…
105c296 
…hn#1730) (nhn#1772)

Without this option, the editor always catches the focus on
initialization, making it possibly incompatible with other elements on
the page that also need the focus at startup.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Enhancement Enhance performance or improve usability of original features. Question
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add an 'autofocus' option that can disable initial focus (close #1730)
6 participants
@azmeuk @n3storm @big-dream @js87zz @ats1999 @seanwang1998