Wysiwyg-editor: Froala editor does not handle programmatically set focus properly

[nevendyulgerov]

Hi, I am using the paid version of Froala and overall the library is great and behaves as expected :)
However, there are some problems that make working with it troublesome. One of those problems is the editor's inability to focus properly on init. Due to this, I am not able to properly set the focus on the editor, without hacks on my end.

When you programmatically set the editor to receive the focus after initialization, the editor's curser starts to act abnormally by moving to position 0. To battle this I need to add more code/hacks. Since my goal is to simply initialize a focused editor, I believe that Froala should expose an option for this. Something like focusOnInit or autoFocus. Below is a detailed explanation of the issue:

Expected behavior.

Froala editor should be able to allow for initial focus after the editor is loaded without side effects or abnormal behavior.

Actual behavior.

Froala editor does not offer a proper way to focus the content on initial load.

Steps to reproduce the problem.

1. Initialize the editor
2. Enable editor focus:

$editor.on('froalaEditor.initialized', (event, editor) => {
    editor.events.focus(true);
}).froalaEditor();

OS.

Windows 10

Browser.

Chrome/Firefox/IE/Safari any version

Note: After step 2, when you enter some content, the curser starts moving to position 0. This is abnormal behavior. The curser must stay at its current position without any steps required from the programmer.

I strongly believe that Froala should handle all this logic internally and only expose a meaningful option for the client coder. Something like:

$editor.froalaEditor({
  focusOnInit: true // defaults to false
});

This should be everything required from the client coder to enable focus on init. Right now, this feature is non existent in Froala.

Is this something that can be included in Froala's feature roadmap?

[stefanneculai]

@nevendyulgerov when using the approach you described, which is the one we recommend, the cursor remains at the correct position. I've made a jsFIddle to illustrate it, maybe I am missing something: https://jsfiddle.net/wc5c3jhk/237/.

[nevendyulgerov]

@stefanneculai unfortunately, testing without context won't work for you. I am using your editor in a react app. Yes, I know there is a react component react-froala-wysiwyg however this is not really an option for me at the moment. I need to use the native editor and things don't look good when your try to incorporate it in a react app. Maybe you should keep this in mind and test the editor when wrapped by a react component :)

It would be really great if you guys can look into those issues rather than closing my ticket before any further details are provided.

[stefanneculai]

The problem of the jumping cursor is most likely coming from setting the HTML back to the editor while typing in it. I believe that in your implementation, you are getting the edited HTML and then in React you set it back to the editor somehow. When the cursor is inside the editable area we do not recommend to put new HTML in there because that would make the editor loose cursor position and scroll because the selection info is reset.

[nevendyulgerov]

Thank you for your comment. I will keep this mind. However, I still think that this is a defect in Froala. Focusing the editor should be something trivial that works out-of-the-box and does not require custom logic to handle regardless of the context. Please keep this in mind for future revisions of your software.

Also, can you please let me know how to programmatically trigger focus on the editor? I am not referring the initialization focus. I am referring to a focus that may occur during any time while the editor is being used.