dotnet / dotnet/aspnetcore

Blazor: ToggleEvent of dialog/details/popover is handled with blank EventArgs instead of ToggleEventArgs

Open
#66,479 2 comments 3 reactions 0 assignees View on GitHub
area-blazor copilot-candidate feature-request
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 6h
Merged PRs (30d)
290

Description

### Is there an existing issue for this?

- [x] I have searched the existing issues

### Describe the bug

HTML elements with `popover` attribute, as well as ``, and `` fire a `toggle` event of type `ToggleEvent`. You will need the properties `newState` and `oldState` to know whether the element is now shown or hidden. Blazor already handles this toggle event, but creates an empty `EventArgs`. This event is currently of little use in its current form.

I found some relevant code.

Here is the toggle event configured but not treated as ToggleEvent. (`cancel` and `close` (only ``) are fine, they are just generic `Event`s. Although it would be nice to be able to read the [returnValue](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue#checking_the_return_value) string property in C# without additional JS interop.)

https://github.com/dotnet/aspnetcore/blob/c4db2306aad327f8c45c546f82625082156f73bb/src/Components/Web.JS/src/Rendering/Events/EventTypes.ts#L169-L173

The next place is the C# side. A ToggleEventArgs class needs to be created too. (As mentioned above, `` and `popover` are affected too.)

https://github.com/dotnet/aspnetcore/blob/c4db2306aad327f8c45c546f82625082156f73bb/src/Components/Web/src/Web/EventHandlers.cs#L125-L126

I don't know if there are other places that need to be changed.

### Expected Behavior

Fire the ToggleEvent with proper ToggleEventArgs.

### Steps To Reproduce

Create a blank "Blazor Web App", render mode server, interactive rendering globally enabled.

Change Components/Pages/Home.razor to
```C#
@page "/"
@inject IJSRuntime js

Home

Hello, world!

Open Modal

Content

@code {
private IJSObjectReference? module;
private ElementReference dialog;

private void onOpen() => _ = module?.InvokeVoidAsync("showModal", dialog);

protected override async Task OnAfterRenderAsync(bool firstRender) {
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
module = await js.InvokeAsync("import", "./Components/Pages/Home.razor.js");
}

private Task onToggle(EventArgs arg) {
Console.WriteLine(arg.GetType());
return Task.CompletedTask;
}
}
```

Create Components/Pages/Home.razor.js
```
export const showModal = (element) => element.showModal();
```

You can examine the arg in the onToggle() method. The dialog can be closed with the Esc key.

### Exceptions (if any)

_No response_

### .NET Version

10.0.202

### Anything else?

There is also a beforetoggle event, which is also a ToggleEvent. But I don't think this is useful, because you can't cancel this event in C#.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.