Merge pull request #10734 from abpframework/enisn/rel-5.0/fix-select2-issues

Better solution for Select2 with BS5 Modals

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js

@@ -81,6 +81,7 @@
                 var itemsPropertyName = $(this).data("autocompleteItemsProperty");
                 var filterParamName = $(this).data("autocompleteFilterParamName");
                 var selectedText = $(this).data("autocompleteSelectedItemName");
+                var parentSelector = $(this).data("autocompleteParentSelector");
                 var name = $(this).attr("name");
                 var selectedTextInputName = name.substring(0, name.length - 1) + "_Text]";
                 var selectedTextInput = $('<input>', {
@@ -119,7 +120,8 @@
                             };
                         }
                     },
-                    width: '100%'
+                    width: '100%',
+                    dropdownParent: parentSelector ? $(parentSelector) : $('body'),
                 });
                 $select.on('select2:select', function (e) {
                     selectedTextInput.val(e.params.data.text);

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Bundling/BasicThemeGlobalStyleContributor.cs

@@ -7,7 +7,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Bundling
         public override void ConfigureBundle(BundleConfigurationContext context)
         {
             context.Files.Add("/themes/basic/layout.css");
-            context.Files.Add("/themes/basic/custom/select2-bs5-fix.css");
         }
     }
 }

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/wwwroot/themes/basic/custom/select2-bs5-fix.css

@@ -1,4 +0,0 @@
-/*TODO: Remove after BS5 Modal support of select2 */
-span.select2-container.select2-container--default.select2-container--open {
-    z-index: 1056; /*Just for BS5 Modals*/
-}

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/CreateModal.cshtml

@@ -13,7 +13,7 @@
 }
 
 <form asp-page="/CmsKit/Menus/MenuItems/CreateModal">
-    <abp-modal>
+    <abp-modal id="menu-create-modal">
         <abp-modal-header title="@L["New"].Value"></abp-modal-header>
         <abp-modal-body>
 

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml

@@ -13,7 +13,7 @@
 }
 
 <form asp-page="/CmsKit/Menus/MenuItems/UpdateModal">
-    <abp-modal>
+    <abp-modal id="menu-update-modal">
         <abp-modal-header title="@L["New"].Value"></abp-modal-header>
         <abp-modal-body>
             <abp-input asp-for="Id"/>

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/createModal.js

@@ -33,6 +33,7 @@ $(function () {
                 $pageId.data('autocompleteValueProperty', 'id');
                 $pageId.data('autocompleteItemsProperty', 'items');
                 $pageId.data('autocompleteFilterParamName', 'filter');
+                $pageId.data('autocompleteParentSelector', '#menu-create-modal');
 
                 abp.dom.initializers.initializeAutocompleteSelects($pageId);
             }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js

@@ -34,6 +34,7 @@ $(function () {
                 $pageId.data('autocompleteValueProperty', 'id');
                 $pageId.data('autocompleteItemsProperty', 'items');
                 $pageId.data('autocompleteFilterParamName', 'filter');
+                $pageId.data('autocompleteParentSelector', '#menu-update-modal');
 
                 abp.dom.initializers.initializeAutocompleteSelects($pageId);
             }