question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When setting mode from readonly to design, tinymce steals focus

See original GitHub issue

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

  • When tinymce is in readonly mode
  • If it is set to design mode
  • It automatically sets focus to the text field

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.

Here is a demo: http://fiddle.tinymce.com/f2gaab/1

  • Tinymce is set to readonly on load
  • Click “toggle enabled” button to set tinymce to “design” mode

What is the expected behavior?

Tinymce should not take focus when set to design mode.

I have a form that has many fields disabled, one of which is a tinymce text area. When enabling the form, all fields become enabled, but tinymce is not the first field in the form, and it is unexpected that it would take focus.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

Versions: I have tested this in edge and 4.8.3 in the fiddle. Browser: Chrome OS: Mac OSX

I don’t know if this worked in previous versions.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:5
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
javifm86commented, Jan 24, 2019

Waiting for that config! Very annoying behaviour.

0reactions
gmqzcommented, Apr 21, 2021

setMode(mode) method (v4) triggers a focus event after changing from readonly to design mode. Seems V5 doesn’t have this unexpected behavior becose setMode method was deprecated and use editor.mode.set(mode) instead.

Workaround v4

Instead use setMode() you can set the contenteditable property manually

editor.getBody().setAttribute(‘contenteditable’, true\false);

Read more comments on GitHub >

github_iconTop Results From Across the Web

TinyMCE Readonly Mode
Learn how to set TinyMCE readonly mode for those instances when you want to display content in the editor but lock it down...
Read more >
Content formatting options | Docs - TinyMCE
These settings change the way the editor handles the input and output of content. This will help you to create clean, maintainable and...
Read more >
User interface options | Docs - TinyMCE
For more information on the differences between the editing modes, please see this page here. CSS stylesheets and inline editor content. When using...
Read more >
readonly - TinyMCE
This option enables you to specify make editor instances in readonly mode. When they are in readonly mode nothing can be changed and...
Read more >
disable autofocus on tinymce mode change - Stack Overflow
I was able to prevent my editor from gaining focus by using the following instead of setMode(): tinymce.get(id).getBody().
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found