No keyboard on Android when editing iText

[timoostrich]

I don't know when this stopped working, but it looks like the keyboard does not show up on Android anymore, when you enter the editing mode of an iText object.
I tried to set the focus on the hidden textfield as a workaround but I had no success.

So I checked the iText demos and realized it's not working there, too: http://fabricjs.com/test/misc/itext.html
On iOS the keyboard shows up.

Any ideas how to fix this?
It is an essential feature of my app...

I still love fabric.js and have to thank you so much for this awesome library!

[jaseel001]

Same issue for me. It is not working in android chrome latest version (85). Working in all other android browsers. I think issue since last chrome update @timoostrich Please comment if you found any solution

[timoostrich]

Just did some more tests.
Firefox on Android (latest version) works fine - the keyboard comes up.
Huawei's Browser has the same problem like chrome - no keyboard comes up.

I also tried to do focus() or click() on the hiddenTextarea, but I had no success.

[jaseel001]

I found a solution for now.
Modified initHiddenTextarea function like this
const initHiddenTextarea = function() { this.hiddenTextarea = fabric.document.createElement('textarea'); this.hiddenTextarea.setAttribute('autocapitalize', 'off'); this.hiddenTextarea.setAttribute('autocorrect', 'off'); this.hiddenTextarea.setAttribute('autocomplete', 'off'); this.hiddenTextarea.setAttribute('spellcheck', 'false'); this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); this.hiddenTextarea.setAttribute('wrap', 'off'); var style = this._calcTextareaPosition(); // line-height: 1px; was removed from the style to fix this: // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + ' paddingｰtop: ' + style.fontSize + ';'; fabric.document.body.appendChild(this.hiddenTextarea); fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); if (!this._clickHandlerInitialized && this.canvas) { fabric.util.addListener(this.canvas.upperCanvasEl, 'touchstart', this.clickFunc.bind(this)); fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.clickFunc.bind(this)); this._clickHandlerInitialized = true; } }

Extra added code is fabric.util.addListener(this.canvas.upperCanvasEl, 'touchstart', this.clickFunc.bind(this));

and extended fabric text box like this,
fabric.util.object.extend(fabric.Textbox.prototype, { initHiddenTextarea: initHiddenTextarea });

[asturur]

i ll give it a look, i do not have an android device anymore.

[timoostrich]

I found a solution for now.
Modified initHiddenTextarea function like this
const initHiddenTextarea = function() { this.hiddenTextarea = fabric.document.createElement('textarea'); this.hiddenTextarea.setAttribute('autocapitalize', 'off'); this.hiddenTextarea.setAttribute('autocorrect', 'off'); this.hiddenTextarea.setAttribute('autocomplete', 'off'); this.hiddenTextarea.setAttribute('spellcheck', 'false'); this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); this.hiddenTextarea.setAttribute('wrap', 'off'); var style = this._calcTextareaPosition(); // line-height: 1px; was removed from the style to fix this: // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + ' paddingｰtop: ' + style.fontSize + ';'; fabric.document.body.appendChild(this.hiddenTextarea); fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); if (!this._clickHandlerInitialized && this.canvas) { fabric.util.addListener(this.canvas.upperCanvasEl, 'touchstart', this.clickFunc.bind(this)); fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.clickFunc.bind(this)); this._clickHandlerInitialized = true; } }

Extra added code is fabric.util.addListener(this.canvas.upperCanvasEl, 'touchstart', this.clickFunc.bind(this));

and extended fabric text box like this,
fabric.util.object.extend(fabric.Textbox.prototype, { initHiddenTextarea: initHiddenTextarea });

What does is do? Did you only remove the 1px line-height?

[aldyrpl]

this happened to me too :(, any solution?

[timoostrich]

My quick workaround is an additional textarea which is synced to the hiddentextarea of fabric: https://lettering.org/lettering-generator/

`//Sync hiddenTextarea and input in containter
function syncTextToInput(){
var $textarea = document.querySelector('textarea[data-fabric-hiddentextarea]');
var $input = document.querySelector(".js-synced-text");
$input.value = $textarea.value;
}

function syncTextToCanvas(){
var $textarea = document.querySelector('textarea[data-fabric-hiddentextarea]');
var $input = document.querySelector(".js-synced-text");
$textarea.value = $input.value;
var event = new Event('input');
$textarea.dispatchEvent(event);
}`

[havlicekp]

Same issue here, Chrome 92 on Android 10 - tapping on a text box doesn't start edit. The most current Firefox for Android is fine.

@timoostrich Does your workaround work? I've tried https://lettering.org/lettering-generator/ in Android Chrome and seems the issue is still there. Very nice project, though!

[timoostrich]

Same issue here, Chrome 92 on Android 10 - tapping on a text box doesn't start edit. The most current Firefox for Android is fine.

@timoostrich Does your workaround work? I've tried https://lettering.org/lettering-generator/ in Android Chrome and seems the issue is still there. Very nice project, though!

Thank you! Well, there should appear some kind of layer whenever you want to edit a textbox. It's just an additional text input which is synced to the hidden input of fabric.

[KevinShea1990]

same issue, chromium 92.0.4515.131, Samsung Note Android 10. No keyboard when tapping on itext box. Tried the demo page:
http://fabricjs.com/test/misc/itext.html
It's a serious bug and it makes fabricjs useless on android phones. Please fix it asap.

[asturur]

i don't have any android device anymore where i can test those kind of things

[KevinShea1990]

I've found the root cause of this bug. For Chrome on android, single touch will wrongly trigger touchmove event, while chrome on ios doesn't behave like this.
The fix is to record the point of touchstart event, and compare the saved point with current touch point in touchmove event, if they are too close, then we know it's not a touch move event, and this touchmove event is ignored.
fix.zip
In the attached fix.zip, it contains a diff and fixed version of fabric.js v4.6.0.

[asturur]

single touch should trigger both touchStart and touchMove.
If touchStart isn't triggered, this is a chrome bug and i m not sure why fabricJS should fix it