dropdownParent added to dropdownlistbase

VahidFarahmandian · Jul 30, 2024 · 3eedc32 · 3eedc32
1 parent 024ffcc
commit 3eedc32
Show file tree

Hide file tree

Showing 17 changed files with 225 additions and 38 deletions.
diff --git a/04-Presentation/Jinget.Blazor/Attributes/DropDownList/JingetDropDownListElementBase.cs b/04-Presentation/Jinget.Blazor/Attributes/DropDownList/JingetDropDownListElementBase.cs
@@ -2,6 +2,14 @@
 
 public abstract class JingetDropDownListElementBase : JingetFormElement
 {
+    /// <summary>
+    /// Defines where to attach the dropdown html in page. By default element will be attached to body tag in page.
+    /// But in some cases like Bootstrap modals, which tend to steal focus from other elements outside of the modal. 
+    /// Since by default, Select2 attaches the dropdown menu to the body element, it is considered "outside of the modal". 
+    /// To avoid this problem, you may attach the dropdown to the modal itself by setting the modal id in this parameter.
+    /// </summary>
+    [Parameter] public string ParentElementId { get; set; } = "";
+
     /// <summary>
     /// Default string used to be shown in dropdownlist, whenever user choose nothing.
     /// </summary>

diff --git a/...ation/Jinget.Blazor/Components/DropDownList/DropDownListTree/JingetDropDownListTree.razor b/...ation/Jinget.Blazor/Components/DropDownList/DropDownListTree/JingetDropDownListTree.razor
@@ -49,9 +49,12 @@
     {
         if (_initialized)
         {
-            //initialize drop down list by calling initJingetDropDownListTree. this functionality is mainly powered by select2.js library.
-            await InitComponentAsync("initJingetDropDownListTree");
-            await base.OnAfterRenderAsync(firstRender);
+            // if (firstRender)
+            // {
+                //initialize drop down list by calling initJingetDropDownListTree. this functionality is mainly powered by select2.js library.
+                await InitComponentAsync("initJingetDropDownListTree");
+                await base.OnAfterRenderAsync(firstRender);
+            //}
         }
     }
 }
diff --git a/...tion/Jinget.Blazor/Components/DropDownList/DropDownListTree/JingetDropDownListTreeBase.cs b/...tion/Jinget.Blazor/Components/DropDownList/DropDownListTree/JingetDropDownListTreeBase.cs
@@ -24,6 +24,18 @@ static string Traverse(IEnumerable<JingetDropDownTreeItemModel> set, JingetDropD
         return route;
     }
 
+    object? NormalizeParentValue(object? parentValue)
+    {
+        if (parentValue == null)
+            return null;
+        if (
+            parentValue.ToString() == Guid.Empty.ToString() ||
+            parentValue.ToString() == "0" ||
+            parentValue.ToString() == string.Empty)
+            return null;
+        return parentValue;
+    }
+
     /// <summary>
     /// Data binded to the drop down list
     /// </summary>
@@ -40,7 +52,7 @@ protected override async Task OnInitializedAsync()
                 .Select(x => new
                 {
                     x.Value,
-                    x.ParentValue,
+                    ParentValue = NormalizeParentValue(x.ParentValue),
                     x.Text,
                     Route = Traverse(OriginalItems, x, out int level),
                     Level = level

diff --git a/04-Presentation/Jinget.Blazor/Components/DropDownList/JingetDropDownListBaseComponent.cs b/04-Presentation/Jinget.Blazor/Components/DropDownList/JingetDropDownListBaseComponent.cs
@@ -2,6 +2,14 @@
 
 public abstract class JingetDropDownListBaseComponent<T> : JingetBaseComponent where T : JingetDropDownItemModelBase
 {
+    /// <summary>
+    /// Defines where to attach the dropdown html in page. By default element will be attached to body tag in page.
+    /// But in some cases like Bootstrap modals, which tend to steal focus from other elements outside of the modal. 
+    /// Since by default, Select2 attaches the dropdown menu to the body element, it is considered "outside of the modal". 
+    /// /// To avoid this problem, you may attach the dropdown to the modal itself by setting the modal id in this parameter.
+    /// </summary>
+    [Parameter] public string ParentElementId { get; set; } = "";
+
     /// <summary>
     /// Default string used to be shown in dropdownlist, whenever user choose nothing.
     /// </summary>
@@ -60,7 +68,8 @@ await JS.InvokeVoidAsync(jsInitiatorFunction,
                 IsSearchable,
                 IsRtl,
                 NoResultText,
-                SearchPlaceholderText
+                SearchPlaceholderText,
+                ParentElementId
             });
     }
 

diff --git a/04-Presentation/Jinget.Blazor/Components/DynamicComponent/JingetDynamicField.razor b/04-Presentation/Jinget.Blazor/Components/DynamicComponent/JingetDynamicField.razor
@@ -46,6 +46,7 @@ else if (Attribute is JingetDropDownListElement dropDown)
 {
     <JingetDropDownList @ref=RefObject
                         Id="@Id"
+                        ParentElementId="@dropDown.ParentElementId"
                         Value=@Value
                         CssClass="@Attribute.CssClass"
                         HelperText="@dropDown.HelperText"
@@ -66,6 +67,7 @@ else if (Attribute is JingetDropDownListTreeElement dropDownTree)
 {
     <JingetDropDownListTree @ref=RefObject
                             Id="@Id"
+                            ParentElementId="@dropDownTree.ParentElementId"
                             Value=@Value
                             CssClass="@Attribute.CssClass"
                             HelperText="@dropDownTree.HelperText"

diff --git a/04-Presentation/Jinget.Blazor/Components/DynamicComponent/JingetDynamicForm.razor b/04-Presentation/Jinget.Blazor/Components/DynamicComponent/JingetDynamicForm.razor
@@ -7,7 +7,7 @@
         @foreach (var p in Properties)
         {
             <MudItem lg="6" md="6" xs="12" sm="6" Style=@style>
-                <JingetDynamicField Id=@GetId(p.Attribute)
+                <JingetDynamicField Id=@(string.IsNullOrWhiteSpace(p.Attribute?.Id) ? $"jinget-{p.GetHashCode()}" : p.Attribute.Id)
                                     Value=@GetValue(p.Property)
                                     Attribute="@p.Attribute"
                                     Binding="@p.Property"

diff --git a/04-Presentation/Jinget.Blazor/Components/DynamicComponent/JingetDynamicFormBase.cs b/04-Presentation/Jinget.Blazor/Components/DynamicComponent/JingetDynamicFormBase.cs
@@ -98,6 +98,10 @@ protected void OnValueChanged(string prop, object? value)
                         convertedValue = Convert.ChangeType(dateRangeValue, t);
                     }
                 }
+                else if(t == typeof(Guid))
+                {
+                    convertedValue = (value == null) ? null : Guid.Parse(value.ToString());
+                }
                 else
                 {
                     if (value is IConvertible)
@@ -117,10 +121,6 @@ protected void OnValueChanged(string prop, object? value)
         }
     }
 
-    protected internal string GetId(JingetFormElement? element)
-    {
-        return string.IsNullOrWhiteSpace(element?.Id) ? $"jinget-{element.GetHashCode()}" : element.Id;
-    }
     protected internal object? GetValue(PropertyInfo property)
     {
         object? value = null;

diff --git a/04-Presentation/Jinget.Blazor/Components/Popup/JingetModal.razor b/04-Presentation/Jinget.Blazor/Components/Popup/JingetModal.razor
@@ -3,7 +3,7 @@
 
 @inherits JingetPopupBase
 
-<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
+<div id="@Id" class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
     <div class="modal-dialog modal-lg" role="document">
         <div class='modal-content @(Rtl?"rtl":"ltr")'>
             @if (ShowHeader)

diff --git a/04-Presentation/Jinget.Blazor/Components/Popup/JingetPopupBase.cs b/04-Presentation/Jinget.Blazor/Components/Popup/JingetPopupBase.cs
@@ -2,6 +2,7 @@
 
 public abstract class JingetPopupBase : ComponentBase
 {
+    [Parameter] public string Id { get; set; }
     [Parameter] public bool Rtl { get; set; } = true;
 
     [Parameter] public string? CloseButtonText { get; set; } = "بستن";

diff --git a/04-Presentation/Jinget.Blazor/README.md b/04-Presentation/Jinget.Blazor/README.md
@@ -805,6 +805,11 @@ Add the `JingetDropDownList` to your page and start using it;-)
 
 `DataProviderFunc`: Defines a method which is used to populate the data in dropdownlist.
 
+`ParentElementId`: Defines where to attach the dropdown html in page. By default element will be attached to body tag in page.
+But in some cases like Bootstrap modals, which tend to steal focus from other elements outside of the modal. 
+Since by default, Select2 attaches the dropdown menu to the body element, it is considered "outside of the modal". 
+To avoid this problem, you may attach the dropdown to the modal itself by setting the modal id in this parameter.
+
 ***Callbacks:***
 
 `OnChange`: Fires a callback whenever the selected item changed.

diff --git a/04-Presentation/Jinget.Blazor/wwwroot/js/jinget.core.js b/04-Presentation/Jinget.Blazor/wwwroot/js/jinget.core.js
@@ -18,13 +18,13 @@
 loadScript({
     url: '_content/Jinget.Blazor/js/jinget.select2.js',
     callback: loadScript({
-        url: '_content/Jinget.Blazor/js/jinget.select2.ext.js',
+        url: '_content/Jinget.Blazor/js/jinget.select2ext.js',
         callback: loadScript({
             url: '_content/Jinget.Blazor/js/jinget.jalali.picker.date.js',
             callback: loadScript({
                 url: '_content/Jinget.Blazor/js/jinget.custom.js',
                 callback: loadScript({
-                    url: '_content/Jinget.Blazor/js/jinget.select2.tree.js'
+                    url: '_content/Jinget.Blazor/js/jinget.select2tree.js'
                 })
             })
         })

diff --git a/04-Presentation/Jinget.Blazor/wwwroot/js/jinget.custom.js b/04-Presentation/Jinget.Blazor/wwwroot/js/jinget.custom.js
@@ -1,7 +1,7 @@
 /*select2 START*/
 window.initJingetDropDownList = (params = {
     dotnet, id, isSearchable = false, isRtl = true, noResultText='Nothing to display!',
-    searchPlaceholderText=''
+    searchPlaceholderText='', parentElementId=''
 } = {}) => {
     var element = $('#' + params.id).select2(
         {
@@ -10,6 +10,12 @@ window.initJingetDropDownList = (params = {
             theme: 'outlined',
             width: 'resolve',
             dropdownPosition: 'auto',
+
+            //example: Bootstrap modals tend to steal focus from other elements outside of the modal.
+            //Since by default, Select2 attaches the dropdown menu to the <body> element, it is considered "outside of the modal".
+            //To avoid this problem, you may attach the dropdown to the modal itself with the dropdownParent setting
+            dropdownParent: params.parentElementId == '' ? null : $('#' + params.parentElementId),
+
             minimumResultsForSearch: params.isSearchable ? 0 : Infinity,
             language: {
                 noResults: function () {
@@ -38,7 +44,7 @@ window.jinget_blazor_dropdownlist_clear = (id) => {
 window.initJingetDropDownListTree = (params = {
     dotnet, id, isSearchable = false, isRtl = true,
     noResultText='Nothing to display!',
-    searchPlaceholderText=''
+    searchPlaceholderText='', parentElementId=''
 } = {}) => {
     var element = $('#' + params.id).jinget_select2tree(
         {
@@ -47,6 +53,12 @@ window.initJingetDropDownListTree = (params = {
             theme: 'outlined',
             width: 'resolve',
             dropdownPosition: 'below',
+
+            //example: Bootstrap modals tend to steal focus from other elements outside of the modal.
+            //Since by default, Select2 attaches the dropdown menu to the <body> element, it is considered "outside of the modal".
+            //To avoid this problem, you may attach the dropdown to the modal itself with the dropdownParent setting
+            dropdownParent: params.parentElementId == '' ? null : $('#' + params.parentElementId),
+
             minimumResultsForSearch: params.isSearchable ? 0 : Infinity,
             searchPlaceholderText: params.searchPlaceholderText,
             language: {
@@ -60,6 +72,7 @@ window.initJingetDropDownListTree = (params = {
         });
     $('#' + params.id).off('select2:select').on('select2:select', function (e) {
         params.dotnet.invokeMethodAsync('OnJSDropDownListSelectedItemChanged', e.params.data.id);
+        jinget_blazor_dropdownlist_tree_selectItem(e.target.id, e.params.data.id);
     });
 };
 window.jinget_blazor_dropdownlist_tree_selectItem = (id, value) => {

diff --git a/...t.Blazor/wwwroot/js/jinget.select2.ext.js → ...et.Blazor/wwwroot/js/jinget.select2ext.js b/...t.Blazor/wwwroot/js/jinget.select2.ext.js → ...et.Blazor/wwwroot/js/jinget.select2ext.js
@@ -64,7 +64,9 @@
         var dropdownPositionOption = this.options.get('dropdownPosition');
 
         if (dropdownPositionOption === 'above' || dropdownPositionOption === 'below') {
+
             newDirection = dropdownPositionOption;
+
         } else {
 
             if (!isCurrentlyAbove && !isCurrentlyBelow) {

diff --git a/....Blazor/wwwroot/js/jinget.select2.tree.js → ...t.Blazor/wwwroot/js/jinget.select2tree.js b/....Blazor/wwwroot/js/jinget.select2.tree.js → ...t.Blazor/wwwroot/js/jinget.select2tree.js
@@ -12,7 +12,6 @@
             //در صورتیکه کاربر روی ایکون کلیک کرد نباید چیزی انتخاب شود و صرفا باید درخت اکسپند یا کلپس شود
             .off("select2:selecting").on("select2:selecting", onTreeItemSelecting);
     };
-
     function onTreeOpened(e) {
         $('input.select2-search__field').prop('placeholder', e.data.searchPlaceholderText);
 

diff --git a/Tests/Jinget.Blazor.Test/Components/Pages/Dynamic.razor b/Tests/Jinget.Blazor.Test/Components/Pages/Dynamic.razor
@@ -79,7 +79,7 @@
     {
         dynamicForm.Model.Status = 1;
         dynamicForm.Model.Status2 = guids[2].ToString();
-        dynamicForm.Model.Geo = new Random().Next(1, 6);
+        //dynamicForm.Model.Geo = new Random().Next(1, 6);
         dynamicForm.Model.LastName = "Farahmandian";
         await messageBox.ShowInfoAsync(Model.Name, $"{Model.Name} {Model.LastName}", Newtonsoft.Json.JsonConvert.SerializeObject(Model));
     }