Blazor Server application to use custom on screen keyboard

I am developing a blazor application which will run on Touch Screen and will require users to enter text or numeric.

I have used below JS Based keyboard since it contains all the details that I need.

https://furcan.github.io/KioskBoard/

I am facing 2 issues:

1. The keyboard does not open inside dialog box
2. The keys pressed on the keyboard are not triggering oninput method.

Below is my OnScreenKeyboard.razor.cs file code:

using Microsoft.AspNetCore.Components;using Microsoft.JSInterop;namespace POS.Common.Components;public partial class OnScreenKeyboard : IAsyncDisposable{    [Inject] IJSRuntime? JS { get; set; }    private IJSObjectReference? module;    private DotNetObjectReference<OnScreenKeyboard>? InstanceWebApi { get; set; }    [Parameter]    public string ClassName { get; set; } = "virtualkeyboard";    [Parameter]    public KeyboardKeysType? KeyboardKeys { get; set; } = KeyboardKeysType.english;    [Parameter]    public KeyboardType Keyboard { get; set; } = KeyboardType.all;    [Parameter]    public KeyboardPlacement Placement { get; set; } = KeyboardPlacement.bottom;    [Parameter]    public string Placeholder { get; set; } = "";    [Parameter]    public bool Specialcharacters { get; set; } = true;    [Parameter]    public KeyboardOption? Option { get; set; } = new KeyboardOption();    protected override async Task OnAfterRenderAsync(bool firstRender)    {        try        {            if (firstRender)            {                module = await JS!.InvokeAsync<IJSObjectReference>("import", "./lib/kioskboard/kioskboards.js");                InstanceWebApi = DotNetObjectReference.Create(this);                await module.InvokeVoidAsync("addScript", "./lib/kioskboard/kioskboard-aio-2.1.0.min.js");                Option ??= new KeyboardOption();                if (KeyboardKeys != null) Option.KeyboardKeysType = KeyboardKeys!.Value;                try                {                    await module.InvokeVoidAsync("init", ClassName, Option);                }                catch (Exception)                {                    await Task.Delay(200);                    await module.InvokeVoidAsync("init", ClassName, Option);                }            }        }        catch (Exception e)        {            if (OnError != null) await OnError.Invoke(e.Message);        }    }    async ValueTask IAsyncDisposable.DisposeAsync()    {        if (module is not null)        {            await module.DisposeAsync();        }    }    [Parameter]    public Func<string, Task>? OnError { get; set; }}

Below is my OnScreenKeyboard.razor file code:

@namespace POS.Common.Components

Below is the code where I am trying to use Radzen Dialog Box to display the keyboard inside dialog box :

<RadzenTextArea     class="@ClassName"    data-kioskboard-type="@KeyboardType.keyboard.ToString()"    data-kioskboard-placement="@(KeyboardPlacement.bottom.ToString())"    @bind-Value="@Model.Description"    @oninput="@(() => FieldUpdated(Model))"    @onfocus="@(() => FocusChangedAsync())"    Style="width: 100%;" />private async Task FocusChangedAsync(){    var parameters = new Dictionary<string, object>    {        { "ClassName", "virtualkeyboard" }, // Customize these parameters as needed        { "KeyboardKeys", KeyboardKeysType.english },        { "Placement", KeyboardPlacement.bottom },        { "Option", new KeyboardOption() }    };    await DialogService.OpenAsync<OnScreenKeyboard>("On-Screen Keyboard", parameters, new DialogOptions() { Width = "600px", Height = "400px" });}