Ngx-quill: Keyboard closes when tapping text in editor with Ionic 4

[ShaneJohnsonCC]

So this is a fairly new issue I have been having. I'm not sure why in the world it's doing this, but when I tap or hold the text in the editor to bring up the highlight, copy, etc popup, it will show the popup for a split second and then close the keyboard. This is on iOS, not sure about android as I haven't tested that yet.

I'm on the latest of everything as of right now. Angular 8.2.8, Ionic 4, Quill 1.3.7, NGX-Quill 7.3.1

[KillerCodeMonkey]

to be honest... i never tried quilljs in native apps.

It is working for me on android with my ionic 4 quill example repo in the browser:

https://killercodemonkey.github.io/ngx-quill-ionic-v4/
https://github.com/KillerCodeMonkey/ngx-quill-ionic-v4

[ShaneJohnsonCC]

So definitely don't mean this in a rude way, but browser example does not help at all. There is no virtual keyboard like on the phone, which is the ultimate issue I am experiencing. Quill is working just fine in the browser for me through ionic serve and ionic lab. Do you think this is an ngx-quill issue or just a quill issue?

[KillerCodeMonkey]

i would guess it is a quill or an ionic issue, because i do not have any special handling for such things. only wrapping quilljs in an angular component.

BTW: i tested it on android in the browser... soo yeah there is a virtual keyboard ;-) and it is working. But i do not tested the build apk.

[ShaneJohnsonCC]

Oh dang, I'm sorry, I definitely mis-read what you said!! Ok, I get how you tested it now. I'm concerned that browser on phone might be showing different results than than an actual app, but also, like i said in my original comment, I haven't tested on Android yet... this is on iOS. But what you said makes sense with you only providing the angular wrapper for this. Thank you for you responses man!

[KillerCodeMonkey]

no probs
maybe i have time to start my ionic v4 example in the ios simulator today

[ShaneJohnsonCC]

That would be amazing! BUT I wouldn't be surprised if it worked.... Because I think my simulator works fine too. This is on an actual iOS phone with the app installed. You would think it wouldn't make a difference but I have experienced slightly different outputs between the two

[ShaneJohnsonCC]

well actually, now that I think about it, I'm using the simulator through Xcode. So no virtual keyboard pops up when I do that, I guess because it recognizes that I can use my normal keyboard. What do you do to make a virtual keyboard appear for iOS if you don't mind me asking?

[KillerCodeMonkey]

woar in such cases i simply googling/duckduckgo it :D. I do not have an iPhone or iOS device at all. but i tihnk you can configure it when the simulator is running.

Try such things: https://stackoverflow.com/questions/24420873/xcode-6-keyboard-does-not-show-up-in-simulator

[ShaneJohnsonCC]

haha I know better! I was just cheating by seeing if you knew immediately ;) haha!

[ShaneJohnsonCC]

Hey I appreciate you man! You made life so much easier with ngx-quill! Love it!

[KillerCodeMonkey]

what an emotional roller coaster trip from "not being rude" to making jokes and endless love 😁

[ShaneJohnsonCC]

LOL! I really meant that I was not meaning it in a rude way, but turned out my own ignorance got in the way on top of that! OOPS facepalm

[ShaneJohnsonCC]

Thank you again!

[ShaneJohnsonCC]

Hey @KillerCodeMonkey ! Wanted to let you know and any anyone else that might have an issue with this, the issue is with ionic core not ignoring [contenteditable] along with inputs and textareas blur event. All you have to do is add no-blur="true" attribute to the .ql-editor div. Which I just did a .setAttribute() function to add it after the quill component is initiated. 😄

[KillerCodeMonkey]

nice thanks for sharing the solution!

[Zinga9]

Hi @ShaneJohnsonCC can you elaborate how you have set no-blur, Please.

[KillerCodeMonkey]

i do not know any "no-blur" attribute, but as @ShaneJohnsonCC described. After the editor is initialised you can just grab the dom-node of the editor.

1. listen on https://github.com/KillerCodeMonkey/ngx-quill#outputs - onEditorCreated
2. grab the editor instance of the $event data.
3. on the editor instance you can find the root-node of the editor
4. use it to select another node or just set the attribute there via element.setAttribute('no-blur', true) (https://developer.mozilla.org/de/docs/Web/API/Element/setAttribute)

Which dom node you need to select i do not know. :)

[Zinga9]

@KillerCodeMonkey Thanks for quick reply, that helped.
By setting as below on onEditorCreated

editor.root.setAttribute('no-blur', true)

resolved the issue.