MudSelectExtended & MudCombobox: Add Modal (#590)

Author: mckaragoz

docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ComboBox/Examples/ComboBoxExample7.razor

@@ -2,7 +2,7 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center justify-center">
-        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Highlighted" Editable="true" MultiSelection="@_multiselection"
+        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Highlighted" Editable="true" MultiSelection="@_multiselection" Modal="@_modal"
                      autocomplete="new-password" Color="_color" Clearable="_clearable" Strict="_strict" Highlight="true" HighlightClass="@(_customHighlightClass ? "mud-theme-primary" : null)" EnableFilter="_enableFilter">
             <MudComboBoxItem Value="@("Foo")">Foo</MudComboBoxItem>
             <MudComboBoxItem Value="@("Bar")">Bar</MudComboBoxItem>
@@ -14,7 +14,7 @@
             }
         </MudComboBox>
 
-        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="With NoItemsContent" Editable="true" MultiSelection="@_multiselection"
+        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="With NoItemsContent" Editable="true" MultiSelection="@_multiselection" Modal="@_modal"
                      autocomplete="new-password" Color="_color" Clearable="_clearable" Strict="_strict" EnableFilter="_enableFilter">
             <ChildContent>
                 <MudComboBoxItem Value="@("Foo")">Foo</MudComboBoxItem>
@@ -41,20 +41,22 @@
             <MudSwitchM3 @bind-Value="@_clearable" Label="Clearable" Color="Color.Secondary" />
             <MudSwitchM3 @bind-Value="@_customHighlightClass" Label="Custom Highlight" Color="Color.Secondary" />
             <MudSwitchM3 @bind-Value="@_enableFilter" Label="Enable Filter" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="@_modal" Label="Modal" Color="Color.Secondary" />
         </MudStack>
     </MudItem>
 </MudGrid>
 
 @code {
-    string? _value;
-    string? _text;
-    IEnumerable<string>? _selectedValues;
-    Color _color = Color.Primary;
-    bool _multiselection;
-    bool _clearable;
-    bool _strict;
-    bool _customHighlightClass;
-    bool _enableFilter = true;
+    private string? _value;
+    private string? _text;
+    private IEnumerable<string>? _selectedValues;
+    private Color _color = Color.Primary;
+    private bool _multiselection;
+    private bool _clearable;
+    private bool _strict;
+    private bool _customHighlightClass;
+    private bool _enableFilter = true;
+    private bool _modal = true;
 
     private string[] states =
     {

docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/SelectExtended/Examples/SelectExtendedExample1.razor

@@ -3,27 +3,29 @@
 <MudGrid>
     <MudItem xs="12" sm="8">
         <MudStack>
-            <MudSelectExtended T="string" Label="RenderFragment Based" Disabled="_disabled">
+            <MudSelectExtended T="string" Label="RenderFragment Based" Disabled="_disabled" Modal="@_modal">
                 <MudSelectItemExtended Value="@("Foo")" Text="Foo" />
                 <MudSelectItemExtended Value="@("Bar")" Text="Bar" />
                 <MudSelectItemExtended Value="@("Fizz")" Text="Fizz" />
                 <MudSelectItemExtended Value="@("Buzz")" Text="Buzz" />
             </MudSelectExtended>
-            <MudSelectExtended T="string" Label="Data Based" ItemCollection="_collection" Disabled="_disabled"  />
-            <MudSelectExtended T="string" Label="Data Based" ItemCollection="_collection" Disabled="_disabled" AddNullItem="true" AddedNullItemText="@_nullItemText" />
+            <MudSelectExtended T="string" Label="Data Based" ItemCollection="_collection" Disabled="_disabled" Modal="@_modal" />
+            <MudSelectExtended T="string" Label="Data Based" ItemCollection="_collection" Disabled="_disabled" Modal="@_modal" AddNullItem="true" AddedNullItemText="@_nullItemText" />
         </MudStack>
     </MudItem>
 
     <MudItem xs="12" sm="4">
         <MudStack>
             <MudSwitchM3 @bind-Value="_disabled" Color="Color.Secondary" Label="Disabled" />
+            <MudSwitchM3 @bind-Value="_modal" Color="Color.Secondary" Label="Modal" />
             <MudTextField @bind-Value="_nullItemText" Label="Null Item Text" Variant="Variant.Outlined" />
         </MudStack>
     </MudItem>
 </MudGrid>
 
 @code {
     private bool _disabled = false;
+    private bool _modal = true;
     private string[] _collection = new string[] { "Foo", "Bar", "Fizz", "Buzz" };
     private string? _nullItemText = "None";
 }

src/CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor

@@ -174,4 +174,4 @@
 
 </CascadingValue>
 <!-- mousedown instead of click needed to close the menu before OnLostFocus runs -->
-<MudOverlay Visible="@_isOpen" @onmousedown="@CloseMenu" LockScroll="@LockScroll" />
+<MudOverlay Visible="@_isOpen" @onmousedown="@CloseMenu" Modal="@GetModal()" AutoClose="@(!GetModal())" OnClosed="@(() => CloseMenu())" LockScroll="@LockScroll" />

src/CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

@@ -15,6 +15,9 @@ public partial class MudComboBox<T> : MudBaseInputExtended<T>
     {
         #region Constructor, Injected Services, Parameters, Fields
 
+        [Inject]
+        private IPopoverService PopoverService { get; set; } = null!;
+
         /// <summary>
         /// Constructor for ComboBox
         /// </summary>
@@ -325,6 +328,19 @@ protected internal void SetSearchString(T value)
         [Category(CategoryTypes.FormComponent.ListBehavior)]
         public bool SelectAll { get; set; }
 
+        /// <summary>
+        /// If true prevent background interaction when open. Default is true.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Selecting)]
+        public bool? Modal { get; set; } = true;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        protected bool GetModal() => Modal ?? PopoverService.PopoverOptions.ModalOverlay;
+
         /// <summary>
         /// Sets position of the Select All checkbox
         /// </summary>

src/CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor

@@ -182,4 +182,4 @@
 </CascadingValue>
 
 <!-- mousedown instead of click needed to close the menu before OnLostFocus runs -->
-<MudOverlay Visible="_isOpen" @onmousedown="@(() => CloseMenu())" LockScroll="@LockScroll" />
+<MudOverlay Visible="_isOpen" @onmousedown="@(() => CloseMenu())" Modal="@GetModal()" AutoClose="@(!GetModal())" OnClosed="@(() => CloseMenu())" LockScroll="@LockScroll" />

src/CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs

@@ -25,7 +25,11 @@ public MudSelectExtended()
             IconSize = Size.Medium;
         }
 
-        [Inject] private IKeyInterceptorService KeyInterceptorService { get; set; } = null!;
+        [Inject]
+        private IKeyInterceptorService KeyInterceptorService { get; set; } = null!;
+
+        [Inject]
+        private IPopoverService PopoverService { get; set; } = null!;
 
         private MudListExtended<T?>? _list;
         private bool _dense;
@@ -178,6 +182,19 @@ public MudSelectExtended()
         [Category(CategoryTypes.List.Selecting)]
         public bool NoWrap { get; set; }
 
+        /// <summary>
+        /// If true prevent background interaction when open. Default is true.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Selecting)]
+        public bool? Modal { get; set; } = true;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        protected bool GetModal() => Modal ?? PopoverService.PopoverOptions.ModalOverlay;
+
         /// <summary>
         /// User class names for the popover, separated by space
         /// </summary>