bug(Table): not restore scrollbar after close drawer edit form

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/Drawer/Drawer.razor

@@ -6,8 +6,7 @@
      data-bb-keyboard="@KeyboardString" data-bb-scroll="@BodyScrollString">
     @if (ShowBackdrop)
     {
-        <div tabindex="-1" class="drawer-backdrop" @onclick="@OnContainerClick">
-        </div>
+        @RenderBackdrop()
     }
     <div tabindex="-1" class="@DrawerClassString" style="@DrawerStyleString" @onclick:stopPropagation>
         <div class="drawer-content">

src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs

@@ -6,7 +6,7 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// Drawer 组件基类
+/// Drawer component
 /// </summary>
 public partial class Drawer
 {
@@ -142,6 +142,14 @@ public partial class Drawer
 
     private string? BodyScrollString => BodyScroll ? "true" : null;
 
+    private bool _render = true;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override bool ShouldRender() => _render;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -163,19 +171,29 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <returns></returns>
     protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(Close));
 
+    private RenderFragment RenderBackdrop() => builder =>
+    {
+        builder.OpenElement(0, "div");
+        builder.AddAttribute(10, "class", "drawer-backdrop modal-backdrop fade");
+        if (IsBackdrop)
+        {
+            builder.AddAttribute(20, "onclick", EventCallback.Factory.Create(this, OnContainerClick));
+        }
+        builder.CloseElement();
+    };
+
     /// <summary>
     /// 点击背景遮罩方法
     /// </summary>
     public async Task OnContainerClick()
     {
-        if (IsBackdrop)
+        if (OnClickBackdrop != null)
         {
-            if (OnClickBackdrop != null)
-            {
-                await OnClickBackdrop();
-            }
-            await Close();
+            await OnClickBackdrop();
         }
+        _render = false;
+        await Close();
+        _render = true;
     }
 
     /// <summary>
@@ -186,6 +204,11 @@ public async Task OnContainerClick()
     public async Task Close()
     {
         IsOpen = false;
+        var animation = await InvokeAsync<bool>("execute", Id, false);
+        if (animation)
+        {
+            await Task.Delay(300);
+        }
         if (OnCloseAsync != null)
         {
             await OnCloseAsync();

src/BootstrapBlazor/Components/Drawer/Drawer.razor.js

@@ -89,6 +89,8 @@ export function execute(id, open) {
     const dw = Data.get(id)
     const { el, body } = dw
     const drawerBody = el.querySelector('.drawer-body')
+    const drawerBackdrop = el.querySelector('.drawer-backdrop')
+    const animationFrame = getComputedStyle(drawerBody).getPropertyValue('transition') !== 'none';
 
     let start = void 0
     const show = ts => {
@@ -100,10 +102,17 @@ export function execute(id, open) {
             requestAnimationFrame(show);
         }
         else {
-            drawerBody.classList.add('show');
-            el.focus();
+            showDrawer();
         }
     }
+
+    const showDrawer = () => {
+        drawerBody.classList.add('show');
+        if (drawerBackdrop) {
+            drawerBackdrop.classList.add('show');
+        }
+        el.focus();
+    }
 
     const hide = ts => {
         if (start === void 0) {
@@ -114,8 +123,7 @@ export function execute(id, open) {
             requestAnimationFrame(hide);
         }
         else {
-            el.classList.remove('show')
-            body.classList.remove('drawer-overflow-hidden')
+            el.classList.remove('show');
         }
     }
 
@@ -126,12 +134,28 @@ export function execute(id, open) {
         if (scroll === false) {
             body.classList.add('drawer-overflow-hidden');
         }
-        requestAnimationFrame(show)
+
+        if (animationFrame) {
+            requestAnimationFrame(show)
+        }
+        else {
+            showDrawer();
+        }
     }
     else if (el.classList.contains('show')) {
-        drawerBody.classList.remove('show')
-        requestAnimationFrame(hide)
+        drawerBody.classList.remove('show');
+        if (drawerBackdrop) {
+            drawerBackdrop.classList.remove('show');
+        }
+        body.classList.remove('drawer-overflow-hidden');
+        if (animationFrame) {
+            requestAnimationFrame(hide)
+        }
+        else {
+            el.classList.remove('show');
+        }
     }
+    return animationFrame;
 }
 
 export function dispose(id) {

src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss

@@ -1,12 +1,11 @@
-.drawer {
+.drawer {
     --bb-drawer-bg: var(--bs-body-bg);
     --bb-drawer-zindex: #{$bb-drawer-zindex};
     --bb-drawer-body-shadow: #{$bb-drawer-body-shadow};
     --bb-drawer-body-padding: #{$bb-drawer-body-padding};
     --bb-drawer-bar-bg: #{$bb-drawer-bar-bg};
     --bb-drawer-bar-hover-color: #{$bb-drawer-bar-hover-color};
     --bb-drawer-bar-drag-color: #{$bb-drawer-bar-drag-color};
-    --bb-drawer-backdrop-bg: #{$bb-drawer-backdrop-bg};
     --bb-drawer-position: fixed;
     position: var(--bb-drawer-position);
     top: 0;
@@ -42,23 +41,13 @@
         pointer-events: none;
     }
 
-    .drawer-backdrop {
-        position: fixed;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        z-index: 1;
-        background-color: var(--bb-drawer-backdrop-bg);
-    }
-
     .drawer-body {
         position: absolute;
         box-sizing: border-box;
         background-color: var(--bb-drawer-bg);
         box-shadow: var(--bb-drawer-body-shadow);
         transition: transform .3s linear;
-        z-index: 2;
+        z-index: 1052;
         pointer-events: auto;
         display: flex;
         padding: var(--bb-drawer-body-padding);
@@ -115,7 +104,7 @@
         .drawer-bar {
             background-color: var(--bb-drawer-bar-bg);
             position: absolute;
-            z-index: 5;
+            z-index: 1055;
 
             .drawer-bar-body {
                 position: absolute;
@@ -188,3 +177,9 @@
 .drawer-overflow-hidden {
     overflow: hidden;
 }
+
+@media (prefers-reduced-motion: reduce) {
+    .drawer .drawer-body {
+        transition: none;
+    }
+}

src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs

@@ -116,7 +116,7 @@ private async Task OnCloseAsync(DrawerOption option)
     /// Dispose 方法
     /// </summary>
     /// <param name="disposing"></param>
-    protected virtual void Dispose(bool disposing)
+    private void Dispose(bool disposing)
     {
         if (disposing)
         {

src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs

@@ -900,7 +900,14 @@ protected async Task ShowEditDrawer(ItemChangedType changedType)
         };
         AppendOptions(editOption, changedType);
 
-        var option = new DrawerOption() { Class = "drawer-table-edit", Placement = Placement.Right, AllowResize = true, IsBackdrop = true, Width = "600px" };
+        var option = new DrawerOption()
+        {
+            Class = "drawer-table-edit",
+            Placement = Placement.Right,
+            AllowResize = true,
+            IsBackdrop = true,
+            Width = "600px"
+        };
         if (OnBeforeShowDrawer != null)
         {
             await OnBeforeShowDrawer(option);

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -1,4 +1,4 @@
-// :root
+// :root
 $bb-primary-color: #409eff;
 $bb-primary-color-rgb: 64, 158, 255;
 $bb-border-focus-color: #86b7fe;
@@ -237,7 +237,6 @@ $bb-drawer-body-padding: 1rem;
 $bb-drawer-bar-bg: rgba(var(--bs-body-color-rgb),.12);
 $bb-drawer-bar-hover-color: #409eff;
 $bb-drawer-bar-drag-color: #0969da;
-$bb-drawer-backdrop-bg: rgba(0, 0, 0, 0.5);
 
 // Dropdown
 $bb-widget-toggle-color: var(--bs-body-color);

test/UnitTest/Components/DrawerTest.cs

@@ -207,6 +207,14 @@ public void BodyScroll_Ok()
         cut.Contains("data-bb-scroll=\"true\"");
     }
 
+    [Fact]
+    public async Task Close_Ok()
+    {
+        Context.JSInterop.Setup<bool>("execute", matcher => true).SetResult(true);
+        var cut = Context.RenderComponent<Drawer>();
+        await cut.InvokeAsync(() => cut.Instance.Close());
+    }
+
     class MockContent : ComponentBase
     {
         [CascadingParameter(Name = "BodyContext")]