Merge pull request #8081 from abpframework/stsrki/dev-closing-modals

Prevent closing modals

framework/src/Volo.Abp.BlazoriseUI/AbpCrudPageBase.cs

@@ -321,12 +321,18 @@ namespace Volo.Abp.BlazoriseUI
             return InvokeAsync(CreateModal.Hide);
         }
 
+        protected virtual void ClosingCreateModal(ModalClosingEventArgs eventArgs)
+        {
+            // cancel close if clicked outside of modal area
+            eventArgs.Cancel = eventArgs.CloseReason == CloseReason.FocusLostClosing;
+        }
+
         protected virtual async Task OpenEditModalAsync(TListViewModel entity)
         {
             try
             {
                 EditValidationsRef?.ClearAll();
-            
+
                 await CheckUpdatePolicyAsync();
 
                 var entityDto = await AppService.GetAsync(entity.Id);
@@ -377,6 +383,12 @@ namespace Volo.Abp.BlazoriseUI
             return Task.CompletedTask;
         }
 
+        protected virtual void ClosingEditModal(ModalClosingEventArgs eventArgs)
+        {
+            // cancel close if clicked outside of modal area
+            eventArgs.Cancel = eventArgs.CloseReason == CloseReason.FocusLostClosing;
+        }
+
         protected virtual async Task CreateEntityAsync()
         {
             try

modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor

@@ -3,8 +3,8 @@
 
 @inherits AbpFeatureManagementComponentBase
 
-<Modal @ref="Modal">
+<Modal @ref="Modal" Closing="@ClosingModal">
-    <ModalContent Size="ModalSize.Large" IsCentered="true">
+    <ModalContent Size="ModalSize.Large" Centered="true">
         <ModalHeader>
             <ModalTitle>@L["Features"]</ModalTitle>
             <CloseButton Clicked="CloseModal" />

modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor.cs

@@ -136,5 +136,10 @@ namespace Volo.Abp.FeatureManagement.Blazor.Components
             var resource = LocalizationOptions.Value.Resources.Values.FirstOrDefault(x => x.ResourceName == resourceName);
             return HtmlLocalizerFactory.Create(resource != null ? resource.ResourceType : LocalizationOptions.Value.DefaultResourceType);
         }
+
+        protected virtual void ClosingModal( ModalClosingEventArgs eventArgs )
+        {
+            eventArgs.Cancel = eventArgs.CloseReason == CloseReason.FocusLostClosing;
+        }
     }
 }

modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/RoleManagement.razor

@@ -75,7 +75,7 @@
 @* ************************* CREATE MODAL ************************* *@
 @if (HasCreatePermission)
 {
-    <Modal @ref="CreateModal">
+    <Modal @ref="CreateModal" Closing="@ClosingCreateModal">
         <ModalContent Centered="true">
             <Form>
                 <ModalHeader>
@@ -111,7 +111,7 @@
 @* ************************* EDIT MODAL ************************* *@
 @if (HasUpdatePermission)
 {
-    <Modal @ref="EditModal">
+    <Modal @ref="EditModal" Closing="@ClosingEditModal">
         <ModalContent Centered="true">
             <Form>
                 <ModalHeader>

modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/UserManagement.razor

@@ -75,7 +75,7 @@
 @* ************************* CREATE MODAL ************************* *@
 @if ( HasCreatePermission )
 {
-    <Modal @ref="CreateModal">
+    <Modal @ref="CreateModal" Closing="@ClosingCreateModal">
         <ModalContent Centered="true">
             <Form>
                 <ModalHeader>
@@ -183,7 +183,7 @@
 @* ************************* EDIT MODAL ************************* *@
 @if ( HasUpdatePermission )
 {
-    <Modal @ref="EditModal">
+    <Modal @ref="EditModal" Closing="@ClosingEditModal">
         <ModalContent Centered="true">
             <Form>
                 <ModalHeader>

modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor

@@ -1,8 +1,8 @@
 @using Microsoft.Extensions.Localization
 @using Volo.Abp.PermissionManagement.Localization
 @inherits Volo.Abp.AspNetCore.Components.AbpComponentBase
-<Modal @ref="_modal">
+<Modal @ref="_modal" Closing="@ClosingModal">
-    <ModalContent Size="ModalSize.Large" IsCentered="true">
+    <ModalContent Size="ModalSize.Large" Centered="true">
         <ModalHeader>
             <ModalTitle>@L["Permissions"] - @_entityDisplayName</ModalTitle>
             <CloseButton Clicked="CloseModal" />

modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor/Components/PermissionManagementModal.razor.cs

@@ -230,5 +230,10 @@ namespace Volo.Abp.PermissionManagement.Blazor.Components
                     .JoinAsString(", ")
             );
         }
+
+        protected virtual void ClosingModal(ModalClosingEventArgs eventArgs)
+        {
+            eventArgs.Cancel = eventArgs.CloseReason == CloseReason.FocusLostClosing;
+        }
     }
 }

modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor/Pages/TenantManagement/TenantManagement.razor

@@ -66,7 +66,7 @@
 @* ************************* CREATE MODAL ************************* *@
 @if ( HasCreatePermission )
 {
-    <Modal @ref="CreateModal">
+    <Modal @ref="CreateModal" Closing="@ClosingCreateModal">
         <ModalContent Centered="true">
             <Form>
                 <ModalHeader>
@@ -119,7 +119,7 @@
 @* ************************* EDIT MODAL ************************* *@
 @if ( HasUpdatePermission )
 {
-    <Modal @ref="EditModal">
+    <Modal @ref="EditModal" Closing="@ClosingEditModal">
         <ModalContent Centered="true">
             <Form>
                 <ModalHeader>