Fabric.js: 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);
}`