Blazor: ToggleEvent of dialog/details/popover is handled with blank EventArgs instead of ToggleEventArgs
- 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
@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
Assessment
This issue has not been assessed yet.