#434 - Any open modal is close on back button and navigation is inter…

…cepted.
maraf · Nov 23, 2022 · b8f58a0 · b8f58a0
1 parent ec85d87
commit b8f58a0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/Money.Blazor.Host/Components/Bootstrap/Modal.razor.cs b/src/Money.Blazor.Host/Components/Bootstrap/Modal.razor.cs
@@ -13,8 +13,10 @@ namespace Money.Components.Bootstrap
 {
     public partial class Modal : System.IDisposable
     {
+        private System.IDisposable locationChangingToken;
+
         [Inject]
-        internal ModalInterop Interop { get; set; }
+        protected ModalInterop Interop { get; set; }
 
         [Inject]
         internal ILog<Modal> Log { get; set; }
@@ -62,17 +64,23 @@ public partial class Modal : System.IDisposable
         protected override void OnInitialized()
         {
             base.OnInitialized();
-            NavigationManager.LocationChanged += OnLocationChanged;
+            locationChangingToken = NavigationManager.RegisterLocationChangingHandler(OnLocationChanging);
         }
 
         public void Dispose()
         {
             Hide();
-            NavigationManager.LocationChanged -= OnLocationChanged;
+            locationChangingToken.Dispose();
         }
 
-        private void OnLocationChanged(object sender, LocationChangedEventArgs e) 
-            => Hide();
+        private async ValueTask OnLocationChanging(LocationChangingContext context)
+        {
+            if (await Interop.IsOpenAsync(Container))
+            {
+                context.PreventNavigation();
+                Hide();
+            }
+        }
 
         protected override void OnParametersSet()
         {

diff --git a/src/Money.Blazor.Host/Components/Bootstrap/ModalInterop.cs b/src/Money.Blazor.Host/Components/Bootstrap/ModalInterop.cs
@@ -29,5 +29,8 @@ internal void Hide(ElementReference element)
 
         internal void Dispose(ElementReference element)
             => jsRuntime.InvokeVoidAsync("Bootstrap.Modal.Dispose", element);
+
+        internal ValueTask<bool> IsOpenAsync(ElementReference element)
+            => jsRuntime.InvokeAsync<bool>("Bootstrap.Modal.IsOpen", element);
     }
 }
diff --git a/src/Money.Blazor.Host/wwwroot/js/site.js b/src/Money.Blazor.Host/wwwroot/js/site.js
@@ -24,6 +24,10 @@ window.Bootstrap = {
         Hide: function (container) {
             $(container).modal('hide');
         },
+        IsOpen: function (container) {
+            const data = $(container).data('bs.modal');
+            return !data || !data._isShown ? false : true;
+        },
         Dispose: function (container) {
             $(container).modal('dispose');
         }