UNO - No events bubbling to my native WASM control

user_2025885 0
Viewed 24

I have created a blank UNO Solution and added this as my MainPage:

[HtmlElement("div")]
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.SetHtmlAttribute("id", "MyDiv");
        this.InitializeComponent();

        Task.Delay(1000).ContinueWith(t => //<- Wait until page is rendered
        {
            // add a simple button
            WebAssemblyRuntime.InvokeJS("document.getElementById(\"MyDiv\").innerHTML = \"<button onclick=\\\"alert('clicked')\\\">test</button>\"");
        });

    }
}

After that I started the WASM project. As expected I see a website containg a button. Unfortunately the button seems to recieve no events at all, there is no hover effect and when I click the button nothing happens.

Is there a setting in UNO where I can force the events to bubble into my native control?

uno-platform
1 Answers

Got it. The trick was to wrap the code wihin an UIElement:

[HtmlElement("div")]
public sealed class CustomControl1 : UIElement
{
   public CustomControl1()
   {
            
       this.SetHtmlAttribute("id", "MyDiv");
       Task.Delay(1000).ContinueWith(t => //<- Wait until page is rendered
       {
           // add a simple button
            WebAssemblyRuntime.InvokeJS("document.getElementById(\"MyDiv\").innerHTML = \"<button onclick=\\\"alert('clicked')\\\">test</button>\"");
       });
   }       
}

Now I can use this Control within my MainPage:

<Grid  Margin="20" >
   <CustomControl1></CustomControl1>
</Grid>

Mouse behavior is as expected again.

user_20258850
Related