Add onmouseenter, onmouseleave events (#40829)

* Added onmouseleave and onmouseenter events.

(cherry picked from commit 7aca1fc)

* Add missing references and add E2E test

* Added blazor.*.js files

* JS based mouse enter/leave test

Co-authored-by: drfuturenet <81646442+drfuturenet@users.noreply.github.com>

src/Components/Web.JS/src/Rendering/Events/EventTypes.ts

@@ -108,6 +108,8 @@ registerBuiltInEventType([
   'mousemove',
   'mousedown',
   'mouseup',
+  'mouseleave',
+  'mouseenter',
   'dblclick',
 ], {
   createEventArgs: e => parseMouseEvent(e as MouseEvent),

src/Components/Web/src/Web/EventHandlers.cs

@@ -16,6 +16,8 @@ namespace Microsoft.AspNetCore.Components.Web;
 // Mouse events
 [EventHandler("onmouseover", typeof(MouseEventArgs), true, true)]
 [EventHandler("onmouseout", typeof(MouseEventArgs), true, true)]
+[EventHandler("onmouseleave", typeof(MouseEventArgs), true, true)]
+[EventHandler("onmouseenter", typeof(MouseEventArgs), true, true)]
 [EventHandler("onmousemove", typeof(MouseEventArgs), true, true)]
 [EventHandler("onmousedown", typeof(MouseEventArgs), true, true)]
 [EventHandler("onmouseup", typeof(MouseEventArgs), true, true)]

src/Components/test/E2ETest/Tests/EventTest.cs

@@ -8,6 +8,8 @@
 using Microsoft.AspNetCore.Testing;
 using OpenQA.Selenium;
 using OpenQA.Selenium.Interactions;
+using OpenQA.Selenium.Support.Extensions;
+using OpenQA.Selenium.Support.UI;
 using Xunit.Abstractions;
 
 namespace Microsoft.AspNetCore.Components.E2ETest.Tests;
@@ -81,6 +83,27 @@ public void MouseOverAndMouseOut_CanTrigger()
         Browser.Equal("mouseover,mouseout,", () => output.Text);
     }
 
+    [Fact]
+    public void MouseEnterAndMouseLeave_CanTrigger()
+    {
+        Browser.MountTestComponent<MouseEventComponent>();
+
+        var input = Browser.Exists(By.Id("mouseenter_input"));
+
+        var output = Browser.Exists(By.Id("output"));
+        Assert.Equal(string.Empty, output.Text);
+
+        // Mouse enter the button and then mouse leave
+        Browser.ExecuteJavaScript($@"
+            var mouseEnterElement = document.getElementById('mouseenter_input');
+            var mouseEnterEvent = new MouseEvent('mouseenter');
+            var mouseLeaveEvent = new MouseEvent('mouseleave');
+            mouseEnterElement.dispatchEvent(mouseEnterEvent);
+            mouseEnterElement.dispatchEvent(mouseLeaveEvent);");
+
+        Browser.Equal("mouseenter,mouseleave,", () => output.Text);
+    }
+
     [Fact]
     public void MouseMove_CanTrigger()
     {

src/Components/test/testassets/BasicTestApp/MouseEventComponent.razor

@@ -9,6 +9,9 @@
     <p>
         Mouseover: <input id="mouseover_input" type="text" @onmouseover="OnMouseEvent" @onmouseout="OnMouseEvent" />
     </p>
+    <p>
+        Mouseenter: <input id="mouseenter_input" type="text" @onmouseenter="OnMouseEvent" @onmouseleave="OnMouseEvent" />
+    </p>
     <p>
         <span id="mousemove_input" @onmousemove="OnMouseEvent">Mousemove city!</span>
     </p>