Fabric.js: Editing text in Chrome on Android is broken

[jeroengijsman]

Try editing one of the examples on:
http://fabricjs.com/test/misc/itext.html

• when typing text in one of the examples, parts of the already existing text is sometimes added.
• the back/delete button doesn't work, if you hit it a few times and then tap the text again the text partialy gets updates.
• Sometimes the cursor is way off, (i think this is because of all the extra added text)
• i managed to crash the Chrome browser by just typing a couple of words and ignoring all the previous bugs

Tested on Android 6.x and 7.x on a Nexus 5, Nexus 5X and Nexus 6P

[asturur]

are you using the autocomplete text on keyboard?

[jeroengijsman]

@asturur no this is without autocomplete. Actually it already happens by just typing one letter

[fmoutawe]

Same issues on Android 4.4 on Samsung Galaxy Tab E.

[jeroengijsman]

@asturur any news on this? Any suggestions? A'd really like to tackle this problem

[asturur]

delete key does not work, and cursor jump ( that can be a retina problem )
any tool to debug javascript on mobile devices?

[jeroengijsman]

@asturur i did some more testing with phones hooked up to my laptop and used the chrome://inspect to see if anything weird happens but so no errors or thinks that might be the problem.

Did you already tested this yourself? i think it's easier to talk about this if you have seen the behaviour on android

[asturur]

yes i tried on android. i think i have to make up a test page that prints on html some event properties to figure out what is going on.

[jeroengijsman]

@asturur did you create a branch for this? Maybe i can help with testing and figuring out whats wrong 👍

[austindunn]

Experiencing this on Nexus 6

[krisrang]

Experiencing on Nexus 4 with Android 5.1.1. From what I gathered the bogus text gets added when onCompositionUpdate triggers on the itext so removing that listener on android works around that issue and makes it halfway usable but the delete and other issues remain.

[asturur]

this will probably be fixed in a future release, where i decided to rewrite the text component for easier mod/ input capabilities.
Keep in mind that canvas element on mobile browsers has so many limitation and is not in supported list at all.
That does not mean i m not really trying to fix it.

[arminbusatlic]

Hello, even though it does have many limitations, this limitation with iText on Android is quite big, maybe the biggest and most restrictive. iText is pretty much unusable on Android devices which is a big deal.

Thank you for your support. Keep us updated on when you think this issue could be resolved.

[Sysaninster]

I have similar problems with the back/delete button in android 4.2.2 (Lenovo B8000-H), but I don't have any problems in android 6.0.1 (Samsung Galaxy A7 (2016)).

[MattiLehtinen]

Experiencing this with nexus 5X (android 7.1.2)

[asturur]

Hey someone of you have a way to test the new fabricjs 2.0 beta with the android devices? is available on NPM and for download. is not on website yet.

[davidrossiter]

I just came here looking for a solution or to draw some attention to this issue, but you guys have it covered! I am experiencing the same, it's the only drawback I've had with FabricJS.

https://streamable.com/4jr4m

It happens with auto correct on or off, same result.

Delete doesn't work well at all, after 10+ clicks it may delete 1 character.

It duplicates many characters and random ones when you type anything.

It eventually crashes,

Experiencing it on Android 6 and 7 on these devices:
Sony Z5 Compact
Samsung Galaxy S7 Edge

Works fine on iPhone using Safari, no issue at all.

[davidrossiter]

Just gave it a test and this is fixed in 2.0 beta 😀

[asturur]

thanks for confirming it

[sschendel]

Is this issue confirmed fixed? Should issue be closed?

[asturur]

i think it works. Just can respond weirdly with strange setups.

[amitmgit]

Hi Andrea,
I have tested small piece of code to write text using iText feature of fabricjs but seems to me it's not working with android chrome browser but same thing working with firefox browser app in mobile and in desktop everything is fine. Not getting where is the issue for android chrome browser.

I was trying with this sample code in website :

canvas = new fabric.Canvas('c');
var textbox = new fabric.IText('New\nText Here', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
0: {
0: { textDecoration: 'underline', fontSize: 80 },
1: { textBackgroundColor: 'red' }
},
1: {
0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
4: { fontSize: 20 }
}
}
});
canvas.add(textbox).setActiveObject(textbox);
I'm using this reference - https://jsfiddle.net/4nzygs8a/

Please respond me. Thanks in advance

Regards
Amit

[asturur]

is unclear what is not working. What is not working?

[amitmgit]

Not able to type anything inside the box even existing text("New text Here") not able to delete.

[amitmgit]

Just open this jsfiddle into you android mobile and try to type something on itext its not working.