bug(EditDialog): trigger OnCloseAsync callback twice (#4787)

* refactor: 移除基类方法调用

* refactor: 移除 IJSRuntime 注入服务

* doc: 更新文档

* chore: 更新 auto 文件夹

* revert: 撤销更改

* refactor: 单独响应 OnCloseAsync 参数

* refactor: 修复关闭触发两次问题

* chore: 更新目录结构

* test: 更新单元测试

* revert: 撤销更改

* Revert "refactor: 单独响应 OnCloseAsync 参数"

This reverts commit e25a10d.

* Revert "test: 更新单元测试"

This reverts commit 0634cc1.

* refactor: 重构扩展方法修复触发两次 Close 回调问题

* test: 更新单元测试

* test: 更新单元测试

* test: 更新单元测试

Author: ArgoZhang

BootstrapBlazor.sln

@@ -73,6 +73,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazorAuto", "src\
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazorAuto.Client", "src\BootstrapBlazorAuto\BootstrapBlazorAuto.Client\BootstrapBlazorAuto.Client.csproj", "{7D3FFBD8-A43C-490F-92D1-4F669E7E550F}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "auto", "auto", "{0C783146-82BE-4E81-99A2-EEFF356F1BCC}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -135,8 +137,9 @@ Global
 		{D8AEAFE7-10AF-4A5B-BC67-FE740A2CA1DF} = {7C1D79F1-87BC-42C1-BD5A-CDE4044AC1BD}
 		{01DA4687-0973-4CA6-97F5-04E0B8DD1B13} = {7C1D79F1-87BC-42C1-BD5A-CDE4044AC1BD}
 		{A6E8F478-213E-44EC-BF4D-7C9342C3DEED} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
-		{2A69B4F8-7C7D-4AC3-BE13-B862DE078F6E} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
-		{7D3FFBD8-A43C-490F-92D1-4F669E7E550F} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
+		{2A69B4F8-7C7D-4AC3-BE13-B862DE078F6E} = {0C783146-82BE-4E81-99A2-EEFF356F1BCC}
+		{7D3FFBD8-A43C-490F-92D1-4F669E7E550F} = {0C783146-82BE-4E81-99A2-EEFF356F1BCC}
+		{0C783146-82BE-4E81-99A2-EEFF356F1BCC} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {0DCB0756-34FA-4FD0-AE1D-D3F08B5B3A6B}

src/BootstrapBlazor.Shared/Components/Components/CultureChooser.razor.cs

@@ -18,10 +18,6 @@ public partial class CultureChooser
     [NotNull]
     private IOptionsMonitor<BootstrapBlazorOptions>? BootstrapOptions { get; set; }
 
-    [Inject]
-    [NotNull]
-    private IJSRuntime? JSRuntime { get; set; }
-
     [Inject]
     [NotNull]
     private IStringLocalizer<CultureChooser>? Localizer { get; set; }

src/BootstrapBlazor.Shared/Components/Samples/EditDialogs.razor

@@ -11,11 +11,11 @@
 </Tips>
 
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
-    <div>
-        <Button Text="@Localizer["LeftAlignedButton"]" OnClickWithoutRender="@NormalShowDialog" />
-        <Button Text="@Localizer["RightAlignedButton"]" OnClickWithoutRender="@NormalShowAlignDialog" />
+    <Button Text="@Localizer["LeftAlignedButton"]" OnClickWithoutRender="@NormalShowDialog" />
+    <Button Text="@Localizer["RightAlignedButton"]" OnClickWithoutRender="@NormalShowAlignDialog" />
+    <section ignore>
         <ConsoleLogger @ref="NormalLogger" />
-    </div>
+    </section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["NoRenderTitle"]" Introduction="@Localizer["NoRenderIntro"]" Name="NoRender">

src/BootstrapBlazor.Shared/Locales/en-US.json

@@ -607,7 +607,7 @@
     "NormalTitle": "Basic usage",
     "NormalIntro": "Automatically generate editable forms for each field of the model by binding the <code>TModel</code> data model",
     "NoRenderTitle": "Setting bound model part property does not show",
-    "NoRenderIntro": "By setting the <code>Ignore=true</code> of the <code>IEditorItem</code> instance, the editable pop-up window do not shown.",
+    "NoRenderIntro": "By setting the <b>Address</b> <b>Count</b> <code>Ignore=true</code> of the <code>IEditorItem</code> instance, the editable pop-up window do not shown.",
     "EditDialogOption": "EditDialogOption property",
     "LeftAlignedButton": "Edit popup (left-aligned)",
     "RightAlignedButton": "Edit popup (right aligned)",

src/BootstrapBlazor.Shared/Locales/zh-CN.json

@@ -607,7 +607,7 @@
     "NormalTitle": "基础用法",
     "NormalIntro": "通过绑定 <code>TModel</code> 数据模型，自动生成模型各个字段的可编辑表单",
     "NoRenderTitle": "设置绑定模型部分属性不显示",
-    "NoRenderIntro": "通过设置 <code>IEditorItem</code> 实例的 <code>Ignore=true</code>, 实现编辑弹窗不显示",
+    "NoRenderIntro": "通过设置 <code>IEditorItem</code> 实例的 <b>地址</b> <b>数量</b> 参数 <code>Ignore=true</code>, 实现编辑弹窗不显示",
     "EditDialogOption": "EditDialogOption 属性",
     "LeftAlignedButton": "编辑弹窗(左对齐)",
     "RightAlignedButton": "编辑弹窗(右对齐)",

src/BootstrapBlazor/Extensions/DrawerExtensions.cs

@@ -14,11 +14,13 @@ public static class DrawerExtensions
     /// 弹出编辑抽屉
     /// </summary>
     /// <param name="service"><see cref="DrawerService"/> 服务实例</param>
-    /// <param name="editOption"><see cref="ITableEditDialogOption{TModel}"/> 配置类实例</param>
+    /// <param name="editDialogOption"><see cref="ITableEditDialogOption{TModel}"/> 配置类实例</param>
     /// <param name="option"><see cref="DrawerOption"/> 配置类实例</param>
-    public static async Task ShowEditDrawer<TModel>(this DrawerService service, ITableEditDialogOption<TModel> editOption, DrawerOption option)
+    public static async Task ShowEditDrawer<TModel>(this DrawerService service, TableEditDrawerOption<TModel> editDialogOption, DrawerOption option)
     {
-        option.ChildContent = BootstrapDynamicComponent.CreateComponent<EditDialog<TModel>>(editOption.ToParameter()).Render();
+        var parameters = editDialogOption.ToParameter();
+        parameters.Add(nameof(EditDialog<TModel>.OnCloseAsync), editDialogOption.OnCloseAsync);
+        option.ChildContent = BootstrapDynamicComponent.CreateComponent<EditDialog<TModel>>(parameters).Render();
         await service.Show(option);
     }
 }

src/BootstrapBlazor/Extensions/TableEditDialogOptionExtensions.cs

@@ -36,7 +36,6 @@ public static class TableEditDialogOptionExtensions
         [nameof(EditDialog<TModel>.DisableAutoSubmitFormByEnter)] = option.DisableAutoSubmitFormByEnter,
         [nameof(EditDialog<TModel>.BodyTemplate)] = option.DialogBodyTemplate,
         [nameof(EditDialog<TModel>.FooterTemplate)] = option.DialogFooterTemplate,
-        [nameof(EditDialog<TModel>.OnCloseAsync)] = option.OnCloseAsync,
         [nameof(EditDialog<TModel>.OnSaveAsync)] = new Func<EditContext, Task<bool>>(async context =>
         {
             var ret = false;

test/UnitTest/Components/DialogTest.cs

@@ -210,9 +210,11 @@ await cut.InvokeAsync(() => dialog.Show(new DialogOption()
             return Task.CompletedTask;
         };
         await cut.InvokeAsync(() => dialog.ShowEditDialog(editOption));
+
         // 点击关闭按钮
         button = cut.FindComponents<Button>().First(b => b.Instance.Text == "关闭");
-        await cut.InvokeAsync(() => button.Instance.OnClickWithoutRender!.Invoke());
+        // 关闭按钮未设置 OnClickWithoutRender 事件
+        Assert.Null(button.Instance.OnClickWithoutRender);
         await cut.InvokeAsync(() => modal.Instance.CloseCallback());
         Assert.True(closed);
 

test/UnitTest/Components/TableDrawerTest.cs

@@ -55,31 +55,31 @@ public async Task EditAsync_Ok()
         await cut.InvokeAsync(() => table.Instance.EditAsync());
 
         // 获得关闭按钮直接关闭抽屉
-        var closeButton = cut.FindComponent<DialogCloseButton>();
-        await cut.InvokeAsync(() => closeButton.Instance.OnClickWithoutRender!());
+        var closeButton = cut.Find(".bb-editor-footer .btn-secondary");
+        await cut.InvokeAsync(() => closeButton.Click());
 
         // 自定义数据服务取消回调测试
         table.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.DataService, new MockEFCoreDataService(localizer));
         });
         await cut.InvokeAsync(() => table.Instance.EditAsync());
-        closeButton = cut.FindComponent<DialogCloseButton>();
-        await cut.InvokeAsync(() => closeButton.Instance.OnClickWithoutRender!());
+        closeButton = cut.Find(".bb-editor-footer .btn-secondary");
+        await cut.InvokeAsync(() => closeButton.Click());
 
         // Add 弹窗
         await cut.InvokeAsync(() => table.Instance.AddAsync());
-        closeButton = cut.FindComponent<DialogCloseButton>();
-        await cut.InvokeAsync(() => closeButton.Instance.OnClickWithoutRender!());
+        closeButton = cut.Find(".bb-editor-footer .btn-secondary");
+        await cut.InvokeAsync(() => closeButton.Click());
 
         // 自定义数据服务取消回调测试
         table.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.EditDialogFullScreenSize, FullScreenSize.Always);
         });
         await cut.InvokeAsync(() => table.Instance.AddAsync());
-        closeButton = cut.FindComponent<DialogCloseButton>();
-        await cut.InvokeAsync(() => closeButton.Instance.OnClickWithoutRender!());
+        closeButton = cut.Find(".bb-editor-footer .btn-secondary");
+        await cut.InvokeAsync(() => closeButton.Click());
 
         var closed = false;
         // 测试 CloseCallback
@@ -92,8 +92,8 @@ public async Task EditAsync_Ok()
             });
         });
         await cut.InvokeAsync(() => table.Instance.AddAsync());
-        closeButton = cut.FindComponent<DialogCloseButton>();
-        await cut.InvokeAsync(() => closeButton.Instance.OnClickWithoutRender!());
+        closeButton = cut.Find(".bb-editor-footer .btn-secondary");
+        await cut.InvokeAsync(() => closeButton.Click());
         Assert.True(closed);
 
         // 保存失败，不关闭抽屉

test/UnitTest/Components/TableTest.cs

@@ -5548,11 +5548,15 @@ public async Task OnAfterCancelSaveAsync_Popup()
         var modal = cut.FindComponent<Modal>();
         await cut.InvokeAsync(modal.Instance.CloseCallback);
 
+        // 弹窗
         await cut.InvokeAsync(() => button[0].Click());
-        var cancelButton = cut.Find(".bb-editor-footer .btn");
 
-        // 取消按钮
-        await cut.InvokeAsync(() => cancelButton.Click());
+        // 关闭按钮未设置 OnClickWithoutRender 回调
+        var cancelButton = cut.FindComponent<DialogCloseButton>();
+        Assert.Null(cancelButton.Instance.OnClickWithoutRender);
+
+        // 关闭弹窗
+        await cut.InvokeAsync(modal.Instance.CloseCallback);
         Assert.True(afterCancelSave);
     }