TextBox cannot input any characters in the mobile browser Edge

[KevinYinHHU]

Describe the bug

TextBox cannot input any characters in the mobile browser Edge
①Mobile System Android 14；
②Edge 126.0.2592.86；
③Avalonia UI 11.0.11; Semi.Avalonia 11.0.7.4； Irihi.Ursa 0.3.0；

755021a6abf81d80924ca6e6bffeca8a.mp4

To Reproduce

①Open the mobile browser Edge（Android）
②Accessing websites https://play.avaloniaui.net/
③Select any editable textBox, enter text, and you will find that except for the delete key, no other characters can be entered

Expected behavior

Editable textBox can input any character on the mobile browser Edge

Avalonia version

11.0.11

OS

WebAssembly

Additional context

755021a6abf81d80924ca6e6bffeca8a.mp4

[rabbitism]

Is this really related to ursa or semi?

[KevinYinHHU]

Is this really related to ursa or semi?

Thank you for your response to the question!
This issue is not related to Semi or Ursa
After encountering this issue in my project, I listed all the components that may be related to the problem. Finally, I tested it on the website(https://play.avaloniaui.net/) and found that the issue is related to Avalonia, not Semi or Ursa

[x-a-a-d]

maybe the same issue as #11665 ?

[KevinYinHHU]

maybe the same issue as #11665 ?
Yes, it's the same issue as # 11665, but there is currently no solution, which has a significant impact on the mobile phone project! If the issue cannot be resolved, the mobile project will be forced to pause.

[Gillibald]

Feel free to debug it

[timunie]

Closing as duplicate of #11665

@KevinYinHHU it doesn't help to open new issues for known ones. This doesn't speed up anything...

[KevinYinHHU]

Closing as duplicate of #11665

@KevinYinHHU it doesn't help to open new issues for known ones. This doesn't speed up anything...

Yes, a similar problem has already occurred, look forward to a solution.

[KevinYinHHU]

Feel free to debug it

Thanks.

[KevinYinHHU]

During my exploration of the Avalonia framework, I've encountered limitations in mobile browser environments that extend beyond just issues with TextBox controls; file open and save dialogues also fail to function properly. These challenges appear rooted in browser compatibility rather than any inherent design flaws in Avalonia itself. To address these difficulties, I've devised a temporary solution intended to offer guidance to others facing similar hurdles:

Overview of the Solution
In a browser context, Avalonia essentially behaves as a responsive Canvas component, not unlike other elements on a webpage. By leveraging the [JSImports] and [JSExports] mechanisms, we can invoke native input controls (such as Input or TextArea) to enhance Avalonia's functionality in a manner akin to building a conventional webpage. Although this method adds an extra layer of complexity potentially affecting user experience, it ensures that Avalonia remains usable in mobile browsers.

Implementation Details
Technological Choice: Given my limited expertise in frontend technologies, I opted for LayUI as a supporting tool. This is a lightweight front-end library that includes a variety of basic controls and has a compact size of approximately 350KB.
Custom AKBTextBox: I developed a custom control named AKBTextBox. When detected in a mobile browser environment, this control is set to read-only. By listening for the PointerReleased event, I trigger the layui.prompt dialog from LayUI, capturing user input and synchronizing it back to the AKBTextBox.

public class AKBTextBox : Avalonia.Controls.TextBox
{
protected override Type StyleKeyOverride => typeof(TextBox);
public AKBTextBox()
{
if (MainPanel.Current.IsMobile)
{
this.IsReadOnly = true;
this.PointerReleased += AKBTextBox_PointerReleased;
}
}
private async void AKBTextBox_PointerReleased(object? sender, Avalonia.Input.PointerReleasedEventArgs e)
{
if (OperatingSystem.IsBrowser())
{
string? result = null;
string title=this.Watermark?? "Please enter:";
if (this.AcceptsReturn)
{
result = await BrowserImports.PromptAsync(title, this.Text??"", 2);
}
else
{
result = await BrowserImports.PromptAsync(title, this.Text ?? "", 0);
}
if (result == null) return;
this.Text = result;
}

}

}

Efficacy Verification: Through a series of tests, this approach proved highly effective, achi

e1142e9bd85a4ccf1029ef31ce0216c6.mp4

eving the desired results.
Solution Expansion
Based on this logic, theoretically, we can call upon any native browser control to enrich the capabilities of Avalonia in mobile applications. This strategy isn't confined to text input but can be extended to a broader range of interactive scenarios, significantly enhancing the potential of Avalonia on mobile devices.