fix(ModalDialog): not shown after close previous window when set IsDraggable and IsCenter to true (#4663)

* refactor: 移动可拖动垂直计算逻辑到 Dialog 脚本内

* feat: 增加 _firstRender 控制仅首次渲染增加样式逻辑

* chore: bump version 9.0.0-beta02

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.0-beta01</Version>
+    <Version>9.0.0-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Modal/Modal.razor.js

@@ -17,16 +17,6 @@ export function init(id, invoke, shownCallback, closeCallback) {
     Data.set(id, modal)
 
     EventHandler.on(el, 'shown.bs.modal', () => {
-        const dialog = el.querySelector('.modal-dialog');
-        if (dialog.classList.contains('is-draggable-center')) {
-            const width = dialog.offsetWidth / 2;
-            const height = dialog.offsetHeight / 2;
-
-            dialog.style.setProperty("margin-left", `calc(50vw - ${width}px)`);
-            dialog.style.setProperty("margin-top", `calc(50vh - ${height}px)`);
-            dialog.classList.remove('is-draggable-center');
-        }
-
         invoke.invokeMethodAsync(shownCallback)
     })
     EventHandler.on(el, 'hidden.bs.modal', e => {

src/BootstrapBlazor/Components/Modal/ModalDialog.razor.cs

@@ -24,7 +24,7 @@ public partial class ModalDialog : IHandlerException
         .AddClass("modal-dialog-scrollable", IsScrolling)
         .AddClass("modal-fullscreen", MaximizeStatus)
         .AddClass("is-draggable", IsDraggable)
-        .AddClass("is-draggable-center", IsCentered && IsDraggable)
+        .AddClass("is-draggable-center", IsCentered && IsDraggable && _firstRender)
         .AddClass("d-none", !IsShown)
         .AddClass(Class, !string.IsNullOrEmpty(Class))
         .Build();
@@ -291,6 +291,8 @@ public partial class ModalDialog : IHandlerException
 
     private DialogResult _result = DialogResult.Close;
 
+    private bool _firstRender = true;
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -329,6 +331,20 @@ protected override void OnParametersSet()
         MaximizeIconString = MaximizeWindowIcon;
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+
+        if (firstRender)
+        {
+            _firstRender = false;
+        }
+    }
+
     /// <summary>
     /// 设置 Header 文字方法
     /// </summary>

src/BootstrapBlazor/Components/Modal/ModalDialog.razor.js

@@ -119,6 +119,15 @@ export function init(id) {
             }
         )
     }
+
+    if (el.classList.contains('is-draggable-center')) {
+        const width = el.offsetWidth / 2;
+        const height = el.offsetHeight / 2;
+
+        el.style.setProperty("margin-left", `calc(50vw - ${width}px)`);
+        el.style.setProperty("margin-top", `calc(50vh - ${height}px)`);
+        el.classList.remove('is-draggable-center');
+    }
 }
 
 export function dispose(id) {