diff --git a/src/Components/Web.JS/src/Rendering/Events/EventTypes.ts b/src/Components/Web.JS/src/Rendering/Events/EventTypes.ts index 89eb799ed3b9..e2cdef267a20 100644 --- a/src/Components/Web.JS/src/Rendering/Events/EventTypes.ts +++ b/src/Components/Web.JS/src/Rendering/Events/EventTypes.ts @@ -23,6 +23,12 @@ export function registerCustomEventType(eventName: string, options: EventTypeOpt throw new Error(`The event '${eventName}' is already registered.`); } + // When aliasing a browser event, the custom event name must be different from the browser event name + // to avoid double-triggering (once for the browser event, once for the custom event wrapper) + if (options.browserEventName && eventName === options.browserEventName) { + throw new Error(`The custom event '${eventName}' cannot have the same name as its browserEventName '${options.browserEventName}'. Choose a different name for the custom event.`); + } + // If applicable, register this as an alias of the given browserEventName if (options.browserEventName) { const aliasGroup = browserEventNamesToAliases.get(options.browserEventName); diff --git a/src/Components/test/E2ETest/Tests/EventCustomArgsTest.cs b/src/Components/test/E2ETest/Tests/EventCustomArgsTest.cs index a5a236a67585..a0bafe47d750 100644 --- a/src/Components/test/E2ETest/Tests/EventCustomArgsTest.cs +++ b/src/Components/test/E2ETest/Tests/EventCustomArgsTest.cs @@ -170,6 +170,17 @@ public void CanRegisterCustomEventAndSupplyComplexParams() line => Assert.Equal("Event with IJSObjectReference received: Hello!", line)); } + [Fact] + public void ThrowsErrorWhenEventNameMatchesBrowserEventName() + { + // Attempt to register a custom event with the same name as the browser event + Browser.Exists(By.Id("register-invalid-same-name-event")).Click(); + + // Verify that an error is thrown + var errorMessage = Browser.Exists(By.Id("same-name-event-error")).Text; + Assert.Contains("cannot have the same name as its browserEventName", errorMessage); + } + void SendKeysSequentially(IWebElement target, string text) { foreach (var c in text) diff --git a/src/Components/test/testassets/BasicTestApp/EventCustomArgsComponent.razor b/src/Components/test/testassets/BasicTestApp/EventCustomArgsComponent.razor index 805cf82b9ff6..b7afb2d5d192 100644 --- a/src/Components/test/testassets/BasicTestApp/EventCustomArgsComponent.razor +++ b/src/Components/test/testassets/BasicTestApp/EventCustomArgsComponent.razor @@ -60,6 +60,15 @@ onclick="Blazor.registerCustomEventType('custommouseover', { browserEventName: 'mouseover' })"> Register custom mouseover event (which has no corresponding native listener) + + +

+ +

+