Wysiwyg-editor: $('#selector').froalaEditor('events.trigger', 'focus'); does not work.

[Fandangi]

Expected behavior.

In jquery, if I call $('selector').focus() on a textarea or input then the caret goes into the control, and the focus() events fire. I can trigger the focus event in javascript code and the events are predictable. With Froala I cannot currently make this happen.

This is bad UX as I cannot put focus on an input.

I tried

$('#selector').froalaEditor('events.trigger', 'focus');

but no success. Comparably, if I click the editor then the caret appears and the focus event is triggered as I expect.

Actual behavior.

It is unclear what is actually happening, other than the event is not being triggered. To overcome any async or delay/sequence issue my codepen case uses a 2 second delay. Console writes show the event trigger is called but the listened is not fired.

Steps to reproduce the problem.

See this codepen. https://codepen.io/JEE42/pen/BwpKzK?editors=1111
Its not hard - just try and use the events.trigger/focus.

OS.

I am using codepen via Google Chrome on Windows 10.

Browser.

I am using codepen via Google Chrome on Windows 10.

[rsov]

Having the same issue. Trying to focus input so that the user can start typing without having to click on the input box for focus.

I have tried the API calls, triggering the click event on the input box, setting timeouts, nothing worked. There are a StackOverflow question about this too

[Fandangi]

I think the link to SO is https://stackoverflow.com/questions/41994388/froala-editor-focus-cursor-on-page-load.

[Fandangi]

Update: I sent an email into Froala support as I needed a workaround. Stefan responded to tell me that the focus can be set via:

selector.froalaEditor('events.focus', true).

So in my pen where I use a delay to simulate time passing between Froala init() and the focus call, I modified to:

  setTimeout(function(){
    $('#edit').froalaEditor('events.focus', true);
      console.clear()
      console.log('fired focus trigger!')
  }, 2000)

And it works. However, whilst it IS good to know the way ahead, this is not the gist of the current API documentation which does not provide this insight and seems instead to hint at the syntax being

$('#selector').froalaEditor('events.trigger', 'focus');

Please clarify the documentation.

Additionally, Stefan also showed me how to set focus at Froala init(), which may be of use to others so here is the example. This uses the jquery event bus to capture the froalaEditor.initialized event and then users the passed-in editor object to call for focus.

    $('div#froala-editor')
     .on('froalaEditor.initialized', function (e, editor) {
      editor.events.focus(true);
    }).froalaEditor({
      toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'specialCharacters', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'quote', 'insertHR', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html', 'applyFormat', 'removeFormat', 'fullscreen', 'print', 'help'],
      pluginsEnabled: null
    })