"Click"/Tap with finger on mobile does not alway show a cursor

[adamgins]

Expected behavior.

Tap Froala editor (with initOnClick true) and it should place the cursor in the editor where tap/finger pressed.

Actual behavior.

On desktop browser this works... but not on mobile.

The editor initializes but does not place the cursor. Sometimes you can get cursor to show if you hold your finger down for a few seconds (it usually selects the word) and then you tap and get a single curosr.

Steps to reproduce the problem.

Tap on editor (several times) - does not work Long press it works, but not always.

OS.

iOS 9.3.4

Browser.

The issue is replicated on both Safari on above iOS and Cordova with Crosswalk Fastclick is installed too https://github.com/ftlabs/fastclick not sure if we need to have <a class="needsclick">Ignored by FastClick</a> ???

[dave-buzzy]

AS per above - but if you try and insert cursor on a table (mobile only), get no response at all. No matter whether cell is empty or already populated with text.

Performs as expected on desktop.

[stefanneculai]

@adamgins I believe there might be a conflict with FastClick which prevents the editor to work correctly. Are you able to replicate that on our website. On our website, the entire inline demo section is made this way and it works without problems.

[adamgins]

Thanks. Is it possible to add the needsclick class to the Froala editor?

Sent from my iPhone

On 22 Aug 2016, at 9:00 PM, Stefan Neculai notifications@github.com wrote:

@adamgins I believe there might be a conflict with FastClick which prevents the editor to work correctly. Are you able to replicate that on our website. On our website, the entire inline demo section is made this way and it works without problems.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[stefanneculai]

I don't know how FastClick works and what exactly it blocks there.

[adamgins]

I will try this

$('.selector').froalaEditor({
  editorClass: 'needsclick'
});

as per https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick

not sure if that will go deep enough?

@dave-buzzy

[stefanneculai]

No, that is not enough because the editor is using the document clicks as well. If fast click is blocking the events there then that is no good. All editor elements are designed to start with fr-. If you could get it ignore all those, then you might have a chance to have it working.

[adamgins]

Thanks. Wondering if run with the iFrame option if it will avert using Fastclick?

[stefanneculai]

@adamgins unfortunately, we're not familiar with how FastClick is designed in order to provide enough details on this matter.

[dave-buzzy]

hi @stefanneculai

Fastclick is designed to apply to everything, except items with a special class of needsclick applied. Unfortunately It doesn't accept a list of items or classes to exclude (as per your fr- suggestion above). It also doesn't apply this exclusion to children (see https://github.com/ftlabs/fastclick/issues/119). To work around, we need to go in and apply a needsclick class to the froala contenteditable element (div class="fr-element fr-view needsclick") and all its nested children.

To do this, I'm doing this on Froala init, blur and destroy. On init for the start state and to cover any existing content, then on blur and destroy to cover any new/changed content after a user has finished editing:

(...init settings etc)
'_oninitialized':function (e,editor){
    ....
    $(e.target).find('[contenteditable], [contenteditable] *').addClass('needsclick');
},
'_onblur':function (e,editor){
    ....
    $(e.target).find('[contenteditable], [contenteditable] *').addClass('needsclick');
},
'_ondestroy':function (e,editor){
    ....
    $(e.target).find('[contenteditable], [contenteditable] *').addClass('needsclick');
}
...

Is this the best way to go about it, or is there a way we can pass a custom class to Froala to add to all nested elements (eg as per the old fr-tag thing mentioned here: https://github.com/froala/wysiwyg-editor/issues/259)?

[stefanneculai]

@dave-buzzy your workaround if fine, what you could do better is to use the editor.$el instead of .find(...)