[WASM] Virtual keyboard not working at all on Android Browsers

[dbriard]

Describe the bug When a TextBox got focus in Android Firefox (WASM), we see the keyboard slide animation, then it automatically close, making impossible to enter text in TextBoxes.

Edit: see more important text input issues below, with video.

[danwalmsley]

@dbriard this is being investigated.

Thank you for your patience.

[dbriard]

@dbriard this is being investigated.

Thank you for your patience.

Thank you so much, I am developing a web application for a few months and so far working with Avalonia was awesome experience, except for text fields... especially on Android (I don't know about iOS). For mobile phones, as the small screen require a different UI I could use an app as workaround, but it is more anoying for tablets as screen is large enough for our app. That would be really perfect if text boxes could work normally on Android browsers. Thank you again for the good support!

[timunie]

@dbriard I think maybe only Firefox mobile is affected. Does it word for you using chrome or vivaldi?

[dbriard]

@dbriard I think maybe only Firefox mobile is affected. Does it word for you using chrome or vivaldi?

Vivaldi I don't know, Chrome and Edge the keyboard stay open but the TextBoxes are not working at all.

[Gillibald]

I had no issues with Chrome typing Korean, Japanese or English on my device

[dbriard]

I had no issues with Chrome typing Korean, Japanese or English on my device

@Gillibald Seriously? You mean in Chrome on Android with virtual keyboard? Here a video of the textbox behavior on my device, the video show the emulator, but I have exactly the same behavior on my device (nokia 7.1, android one phone).

https://github.com/AvaloniaUI/Avalonia/assets/3595443/d00ac36e-e503-4f9b-b1df-126c89687da0 the first second are ok, when the textbox is empty, but then everything get crazy, backspace do not erase, when I touch the textbox (not the keyboard), the text is changing, the keyboard do not add what I want to the textbox...

[timunie]

Is that video recording a virtual machine?

[dbriard]

ng a virtual machine?

@timunie Yes, but same behavior on my physical phone. Here are two videos on two differents phones:

Nokia https://github.com/AvaloniaUI/Avalonia/assets/3595443/22603848-b580-4ade-9ab4-8ff067c1e084

Huawai https://github.com/AvaloniaUI/Avalonia/assets/3595443/106adcd7-ccde-4847-9dcf-8166e2c17f8d

It a new project RC1 with just an Avalonia TextBox. Browser is Chrome Keyboard is french, or FR+EN

[q-g-j]

Is there an update to this problem? I can confirm that the bug still exists. I have the same bugs as described above: On Android, TextBoxes don't really respond to input, In Firefox the virtual keyboard won't even stay open. Backspace is buggy too.

Tested with different Avalonia versions up to 11.1.0-beta1 (physical phone and emulator).

For reference, here is the link to my project: link.

It is hosted here for testing.

[timunie]

@q-g-j could you check the second link? It doesn't open for me.

[q-g-j]

Oh I'm sorry, it should be up again.

[timunie]

nice UI btw

[dbriard]

I haven't tested that bug for a long time. Now, the text fields do not change at all on my android browser.

I hope this can be fixed 🤞

[q-g-j]

Yes, it would be nice if it was fixed soon. I haven't noticed any such problems with desktop browsers.

nice UI btw

thx : )

[timunie]

For priority fixes a support agreement is needed. Otherwise it is done when it's done (by nature of OSS)

[x-a-a-d]

This issue can be seen also at https://play.avaloniaui.net/ when accessed by Android browsers chrome or duckduckgo. My observation is that only enter and backspace work, nothing else. No way to write anything to textbox. No issue when accessed by Windows desktop browsers Chrome, Firefox and edge.

[dbriard]

Hi @Gillibald @timunie I retried TextBox today with Avalonia 11.1.3 WASM on both Android (chrome) and iPhone (Safari).

iPhone: So far it seems to work except that the caret is displayed twice.

Android: we cannot add a single character. I tried to display the keys pressed and I got: None for every character Back for Backspace (but with PhysicalKey as None)

From my understanding this issue is impossible to fix? Could you confirm?

Question: have you considered displaying you own VirtualKeyboard as an Avalonia control so you can retreive the pressed keys?

[Yarith]

Hi @dbriard

Have a look at this gist: Avalonia 11.0 Mobile browser keyboard workaround.

This manually maps the text characters to the corresponding key events and send it to Avalonia. I have written it for Avalonia 11.0. Maybe it still works for 11.1.3. My project was only for german users, so the key mappings there are only for german layout. There is a helper html file to generate code for custom mappings. You can customize this code to your needs. I have only tested it with android devices, but maybe it works also for iOS.

I think this is easier than writing a custom keyboard control.

About the double caret problem under iOS: Maybe the caret color needs to be set to transparent separately. There is an input element which you can normally not see, because it has transparent text and background color. If iOS has also a caret color this could explain the double cursor. Maybe this can be fixed with some CSS.

[dbriard]

@Yarith I will have a look! Thanks a lot for helping!!