ModalDialog - fixed ESC key press event

src/Connected.Components/Components/ModalDialog.razor

@@ -1,25 +1,25 @@
 @using Connected.Models.Modal;
 @if (IsVisible)
 {
-    <div class="modal fade show" tabindex="-1" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))">
+    <div class="modal fade show" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root">
-        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" @ref="@root" >
+        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
-            <div class="modal-content" @onclick="PreventClose">
+                <div class="modal-content" @onclick="PreventClose">
-                @if (!ModalOptions.NoHeader)
+                    @if (!ModalOptions.NoHeader)
-                {
-                    <div class="modal-header" >
-                        <h3 class="modal-title">@Title</h3>
-                </div>
-                }
-                <div class="modal-body">
-                    @Content
-                </div>
-                <div class="modal-footer">
-                    @foreach(ModalButton button in buttons)
                     {
-                        <button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
+                        <div class="modal-header">
+                            <h3 class="modal-title">@Title</h3>
+                        </div>
                     }
+                    <div class="modal-body">
+                        @Content
+                    </div>
+                    <div class="modal-footer">
+                        @foreach (ModalButton button in buttons)
+                        {
+                            <button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
+                        }
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 }

src/Connected.Components/Components/ModalDialog.razor.cs

@@ -1,5 +1,5 @@
 using Connected.Models.Modal;
-using Connected.Services.Modal;
+using Connected.Services;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 
@@ -19,7 +19,6 @@ public partial class ModalDialog : IDisposable
 	protected ModalOptions? ModalOptions { get; set; }
 
 
-
 	protected override void OnInitialized()
 	{
 		ModalService.OnShow += ShowModal;
@@ -51,15 +50,23 @@ public partial class ModalDialog : IDisposable
 		{
 			if (button.CloseDialogOnClick)
 			{
-				IsVisible = false;
+				CloseModal();
-				Title = "";
-				Content = null;
 			}
 			button.OnClickEvent.Delegate.DynamicInvoke(button.OnClickEvent.args);
 		}
 		StateHasChanged();
 	}
 
+	public void CloseModal()
+	{
+		IsVisible = false;
+		Title = "";
+		Content = null;
+		StateHasChanged();
+	}
+
+
+
 	public void Dispose()
 	{
 		if (ModalService is not null)
@@ -71,12 +78,12 @@ public partial class ModalDialog : IDisposable
 
 	public void CheckEscape(KeyboardEventArgs args)
 	{
-		if (ModalOptions.CloseOnEscKey)
+		if (!ModalOptions.DisableEscKey)
 		{
 			var key = args.Key.ToLower();
 			if (key.Equals("escape"))
 			{
-				CloseModal(null);
+				CloseModal();
 			}
 		}
 	}
@@ -87,7 +94,7 @@ public partial class ModalDialog : IDisposable
 		{
 			if (OverlayClickToClose)
 			{
-				CloseModal(null);
+				CloseModal();
 			}
 		}
 		OverlayClickToClose = true;

src/Connected.Components/Models/Modal/ModalButton.cs

@@ -1,10 +1,9 @@
 using Connected.Enums;
-using Connected.Services.Modal;
+using Connected.Services;
 
 namespace Connected.Models.Modal;
 public class ModalButton
 {
-	ModalDialogService _dialogService;
 	public Event OnClickEvent { get; set; }
 	public ModalButtonType ModalButtonType { get; set; } = ModalButtonType.RegularButton;
 	public string ButtonText { get; set; }

src/Connected.Components/Models/Modal/ModalOptions.cs

@@ -1,7 +1,7 @@
 namespace Connected.Models.Modal;
 public class ModalOptions
 {
-	public bool CloseOnEscKey { get; set; } = true;
+	public bool DisableEscKey { get; set; } = false;
 	public bool DisableBackdropClick { get; set; } = false;
 	public bool NoHeader { get; set; } = false;
 

src/Connected.Components/Services/ModalDialogService.cs

@@ -0,0 +1,28 @@
+using Connected.Components;
+using Connected.Models.Modal;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Services;
+public class ModalDialogService
+{
+	public event Action<string, RenderFragment, List<ModalButton>, ModalOptions> OnShow;
+	public event Action OnClose;
+
+	public void ShowDialog(string title, RenderFragment content, List<ModalButton> buttons, ModalOptions options)
+	{
+		OnShow?.Invoke(title, content, buttons, options);
+	}
+
+	public void ShowDialog(string title, MarkupString contentMarkup, List<ModalButton> buttons, ModalOptions options)
+	{
+		var content = new RenderFragment(x => x.AddContent(1, contentMarkup));
+		OnShow?.Invoke(title, content, buttons, options);
+	}
+
+	public void Close()
+	{
+		OnClose?.Invoke();
+	}
+
+
+}

src/Connected.Components/Services/ServiceCollectionExtensions.cs

@@ -1,5 +1,4 @@
-using Connected.Services.Modal;
+using Microsoft.Extensions.DependencyInjection;
-using Microsoft.Extensions.DependencyInjection;
 
 namespace Connected.Services;