Fix Paginator menu not opening (#584)

* Paginator, Menu and MenuSurface updates * Update release notes * Remove debugging text * Clarify Action names
Material-Blazor · Dec 4, 2021 · 2007a19 · 2007a19
1 parent 8cbe541
commit 2007a19
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 17 deletions.
diff --git a/Material.Blazor/Components/Menu/MBMenu.razor.cs b/Material.Blazor/Components/Menu/MBMenu.razor.cs
@@ -2,6 +2,7 @@
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
+using System;
 using System.Threading.Tasks;
 
 namespace Material.Blazor
@@ -23,6 +24,12 @@ public partial class MBMenu : ComponentFoundation
         [Parameter] public MBMenuSurfacePositioning MenuSurfacePositioning { get; set; } = MBMenuSurfacePositioning.Regular;
 
 
+        /// <summary>
+        /// Called when the menu is closed.
+        /// </summary>
+        [Parameter] public Action OnMenuClosed { get; set; }
+
+
         private DotNetObjectReference<MBMenu> ObjectReference { get; set; }
         private ElementReference ElementReference { get; set; }
         private bool IsOpen { get; set; } = false;
@@ -66,6 +73,11 @@ protected override void Dispose(bool disposing)
         public void NotifyClosed()
         {
             IsOpen = false;
+
+            if (OnMenuClosed != null)
+            {
+                _ = InvokeAsync(OnMenuClosed);
+            }
         }
 
 

diff --git a/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs b/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs
@@ -1,6 +1,7 @@
 using Material.Blazor.Internal;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
+using System;
 using System.Threading.Tasks;
 
 namespace Material.Blazor
@@ -23,6 +24,12 @@ public partial class MBMenuSurface : ComponentFoundation
         [Parameter] public MBMenuSurfacePositioning MenuSurfacePositioning { get; set; } = MBMenuSurfacePositioning.Regular;
 
 
+        /// <summary>
+        /// Called when the menu is closed.
+        /// </summary>
+        [Parameter] public Action OnMenuClosed { get; set; }
+
+
         private DotNetObjectReference<MBMenuSurface> ObjectReference { get; set; }
         private ElementReference ElementReference { get; set; }
         private bool IsOpen { get; set; } = false;
@@ -66,6 +73,11 @@ protected override void Dispose(bool disposing)
         public void NotifyClosed()
         {
             IsOpen = false;
+
+            if (OnMenuClosed != null)
+            {
+                _ = InvokeAsync(OnMenuClosed);
+            }
         }
 
 

diff --git a/Material.Blazor/Components/Paginator/MBPaginator.razor b/Material.Blazor/Components/Paginator/MBPaginator.razor
@@ -22,10 +22,10 @@
                 <MBIconButtonToggle @bind-Value="@ToggleOn"
                                     IconOff="arrow_drop_down"
                                     IconOn="arrow_drop_up"
-                                    @onclick="@OnMenuToggleAsync"
                                     @ref="@IconButtonToggle" />
                 <div class="mdc-menu-surface--anchor">
-                    <MBMenu @ref="Menu">
+                    <MBMenu OnMenuClosed="@OnMenuClosed"
+                            @ref="Menu">
                         @foreach (var itemsPerPage in ItemsPerPageSelection)
                         {
                             <MBListItem @key="@itemsPerPage"

diff --git a/Material.Blazor/Components/Paginator/MBPaginator.razor.cs b/Material.Blazor/Components/Paginator/MBPaginator.razor.cs
@@ -118,15 +118,33 @@ private int BackingPageNumber
         private string PositionText => PositionTextString(PageNumber);
         private bool PreviousDisabled => PageNumber <= 0;
         private string PositionTextString(int pageNumber) => $"{pageNumber * ItemsPerPage + 1:G0}-{Math.Min(ItemCount, (pageNumber + 1) * ItemsPerPage):G0} of {ItemCount:G0}";
-        private bool ToggleOn { get; set; }
+
+
+        private bool toggleOn;
+        private bool ToggleOn 
+        {
+            get => toggleOn;
+            set
+            {
+                if (value != toggleOn)
+                {
+                    toggleOn = value;
+
+                    if (toggleOn)
+                    {
+                        _ = InvokeAsync(async () => await Menu.ToggleAsync());
+                    }
+                }
+            }
+        }
 
 
         // Would like to use <inheritdoc/> however DocFX cannot resolve to references outside Material.Blazor
         protected override async Task OnInitializedAsync()
         {
             await base.OnInitializedAsync();
 
-            ConditionalCssClasses
+            _ = ConditionalCssClasses
                 .AddIf("no-border", () => !RequiresBorder);
 
             if (ItemsPerPage == 0)
@@ -157,21 +175,18 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         }
 
 
-        private async Task OnMenuToggleAsync()
+        private void OnMenuItemClick(int itemsPerPage)
         {
-            if (ToggleOn)
-            {
-                await Menu.ToggleAsync();
-                ToggleOn = false;
-            }
+            double ratio = (double)ItemsPerPage / itemsPerPage;
+            BackingItemsPerPage = itemsPerPage;
+            BackingPageNumber = Convert.ToInt32(PageNumber * ratio);
         }
 
 
-        private void OnMenuItemClick(int itemsPerPage)
+        private void OnMenuClosed()
         {
-            double ratio = (double)ItemsPerPage / (double)itemsPerPage;
-            BackingItemsPerPage = itemsPerPage;
-            BackingPageNumber = Convert.ToInt32(PageNumber * ratio);
+            toggleOn = false;
+            _ = InvokeAsync(StateHasChanged);
         }
 
 

diff --git a/articles/ReleaseNotes.md b/articles/ReleaseNotes.md
@@ -22,14 +22,19 @@ Released 2021-??-??
 
 <br />
 
-#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor)
-In Pre-Release Q4 2020 to Q4 2021
+#### [2.0.1](https://github.com/Material-Blazor/Material.Blazor)
+Released 2021-12-04
+
+- Fixes bug in MBPaginator where menu for number of items per pages doesn't open
 
+<br />
+
+#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor)
 Released 2021-11-10
 
 **Updates**
 
-Material.Blazor is now built against .Net 6.0.0 GA
+- Material.Blazor is now built against .Net 6.0.0 GA
 
 **New components**