🐛 fix(Button): the click event conflicts with the click event of menu…

… activator (#2106)

src/Masa.Blazor.JS/src/interop.ts

@@ -1,7 +1,7 @@
 import debounceIt from "just-debounce-it";
 import throttle from "just-throttle";
 
-import { parseDragEvent, parseTouchEvent, touchEvents } from "./events/EventType";
+import { parseDragEvent, parseMouseEvent, parseTouchEvent, touchEvents } from "./events/EventType";
 import { registerExtraEvents } from "./events/index";
 import registerRippleObserver from "./ripple";
 import { canUseDom, getBlazorId, getDom, getElementSelector, IN_BROWSER } from "./utils/helper";
@@ -189,10 +189,12 @@ export function addHtmlElementEventListener<K extends keyof HTMLElementTagNameMa
     let obj: any = {}
 
     if (touchEvents.includes(e.type)) {
-      obj = parseTouchEvent(e)
+      obj = parseTouchEvent(e);
+    } else if (e instanceof MouseEvent) {
+      obj = parseMouseEvent(e);
     } else {
       for (var k in e) {
-        if (typeof e[k] == 'string' || typeof e[k] == 'number') {
+        if (typeof e[k] == "string" || typeof e[k] == "number") {
           obj[k] = e[k];
         }
       }

src/Masa.Blazor/Components/Button/MButton.razor

@@ -13,11 +13,7 @@
             Value="@Key"
             id="@Id"
             ReferenceCaptureAction="reference => Ref = reference"
-            @onclick="HandleOnClick"
-            __internal_stopPropagation_onclick="@OnClickStopPropagation"
-            __internal_preventDefault_onclick="@OnClickPreventDefault"
             @attributes="Attributes">
-
             @GenContent()
         </KeyTransitionElement>
     }
@@ -31,9 +27,6 @@
             Value="@(Show ?? true)"
             id="@Id"
             ReferenceCaptureAction="reference => Ref = reference"
-            @onclick="HandleOnClick"
-            __internal_stopPropagation_onclick="@OnClickStopPropagation"
-            __internal_preventDefault_onclick="@OnClickPreventDefault"
             @attributes="Attributes">
             @GenContent()
         </ShowTransitionElement>
@@ -42,7 +35,6 @@
 
 @code {
 
-
     RenderFragment GenContent() => __builder =>
     {
         if (HasLoader)

src/Masa.Blazor/Components/Button/MButton.razor.cs

@@ -223,6 +223,16 @@ protected override void OnParametersSet()
             Attributes["ripple"] = Ripple;
         }
 
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (firstRender)
+            {
+                await Js.AddClickEventListener(Ref, HandleOnClick, OnClickStopPropagation, OnClickPreventDefault);
+            }
+        }
+
         protected async Task HandleOnClick(MouseEventArgs args)
         {
             if (!Fab && args.Detail > 0)
@@ -237,5 +247,12 @@ protected async Task HandleOnClick(MouseEventArgs args)
 
             await ToggleAsync();
         }
+
+        protected override async ValueTask DisposeAsyncCore()
+        {
+            await Js.RemoveClickEventListener(Ref, "click");
+
+            await base.DisposeAsyncCore();
+        }
     }
 }

src/Masa.Blazor/Extensions/JsRuntimeExtensions.cs

@@ -1,4 +1,5 @@
-using System.Text.Json;
+using System;
+using System.Text.Json;
 
 namespace Masa.Blazor.Extensions;
 
@@ -43,39 +44,54 @@ await jsRuntime.InvokeVoidAsync(JsInteropConstants.AddHtmlElementEventListener,
         );
     }
 
-
-    public static async Task AddHtmlElementEventListener<T>(this IJSRuntime jsRuntime, string selector, string type,
-        Func<T, Task> callback,
+    public static async Task AddHtmlElementEventListener<TEventArgs>(this IJSRuntime jsRuntime, string selector, string type,
+        Func<TEventArgs, Task> callback,
         OneOf<EventListenerOptions, bool> options, EventListenerExtras? extras = null)
     {
         await jsRuntime.InvokeVoidAsync(JsInteropConstants.AddHtmlElementEventListener,
             selector,
             type,
-            DotNetObjectReference.Create(new Invoker<T>(callback)),
+            DotNetObjectReference.Create(new Invoker<TEventArgs>(callback)),
             options.Value,
             extras
         );
     }
 
-    public static async Task AddHtmlElementEventListener<T>(this IJSRuntime jsRuntime, ElementReference el, string type,
-        Func<T, Task> callback,
+    public static async Task AddHtmlElementEventListener<TEventArgs>(this IJSRuntime jsRuntime, ElementReference el, string type,
+        Func<TEventArgs, Task> callback,
         OneOf<EventListenerOptions, bool> options, EventListenerExtras? extras = null)
     {
         await jsRuntime.InvokeVoidAsync(JsInteropConstants.AddHtmlElementEventListener,
             el.GetSelector(),
             type,
-            DotNetObjectReference.Create(new Invoker<T>(callback)),
+            DotNetObjectReference.Create(new Invoker<TEventArgs>(callback)),
             options.Value,
             extras
         );
     }
 
+    public static async Task AddClickEventListener(this IJSRuntime jsRuntime, ElementReference elementReference, Func<MouseEventArgs, Task> callback, bool stopPropagation, bool preventDefault)
+    {
+        await jsRuntime.AddHtmlElementEventListener(elementReference, "click", callback, false, new EventListenerExtras(stopPropagation, preventDefault));
+    }
+
     public static async Task RemoveHtmlElementEventListener(this IJSRuntime jsRuntime, string selector, string type,
         string? key = null)
     {
         await jsRuntime.InvokeVoidAsync(JsInteropConstants.RemoveHtmlElementEventListener, selector, type, key);
     }
 
+    public static async Task RemoveHtmlElementEventListener(this IJSRuntime jsRuntime, ElementReference el, string type,
+        string? key = null)
+    {
+        await jsRuntime.InvokeVoidAsync(JsInteropConstants.RemoveHtmlElementEventListener, el.GetSelector(), type, key);
+    }
+
+    public static async Task RemoveClickEventListener(this IJSRuntime jSRuntime, ElementReference el, string? key = null)
+    {
+        await jSRuntime.RemoveHtmlElementEventListener(el.GetSelector(), "click", key);
+    }
+
     public static async Task ScrollTo(this IJSRuntime jsRuntime, string selector, double? top, double? left = null,
         ScrollBehavior behavior = ScrollBehavior.Smooth)
     {
@@ -173,7 +189,7 @@ public static ValueTask SetPropertyAsync(this IJSRuntime jsRuntime, ElementRefer
     {
         return jsRuntime.InvokeVoidAsync(JsInteropConstants.SetProperty, el, key, value);
     }
-    
+
     // TODO: how about return double instead of double? ?
     private static async Task<double?> GetNumberPropAsync(this IJSRuntime jsRuntime, object el, string name)
     {