From 81b78b2bbf8712f7a30d129b8e2a2e7185c44f77 Mon Sep 17 00:00:00 2001
From: Chris Sainty <chris@chrissainty.com>
Date: Tue, 20 Feb 2024 09:49:04 +0000
Subject: [PATCH] Fix for FocusTrap rerendering

---
 .../Components/Pages/PassDataToModal.razor    |  2 +-
 .../Pages/ReturnDataFromModal.razor           |  7 +++++-
 .../Components/Shared/MessageForm.razor       |  2 ++
 .../Components/Shared/TestClass.cs            | 22 ++++++++++++++++
 samples/InteractiveServer/wwwroot/app.css     | 25 +++++++++++++++++++
 .../wwwroot/css/app.css                       | 25 +++++++++++++++++++
 src/Blazored.Modal/FocusTrap.razor            |  7 ++++++
 7 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 samples/InteractiveServer/Components/Shared/TestClass.cs

diff --git a/samples/InteractiveServer/Components/Pages/PassDataToModal.razor b/samples/InteractiveServer/Components/Pages/PassDataToModal.razor
index 16fc4cd3..6e25fc0b 100644
--- a/samples/InteractiveServer/Components/Pages/PassDataToModal.razor
+++ b/samples/InteractiveServer/Components/Pages/PassDataToModal.razor
@@ -41,7 +41,7 @@
     {
         var parameters = new ModalParameters
         {
-            { nameof(DisplayMessage.Message), _message }
+            { nameof(DisplayMessage.Message), _message },
         };
 
         Modal.Show<DisplayMessage>("Passing Data", parameters);
diff --git a/samples/InteractiveServer/Components/Pages/ReturnDataFromModal.razor b/samples/InteractiveServer/Components/Pages/ReturnDataFromModal.razor
index 4984106b..6fe3c1c3 100644
--- a/samples/InteractiveServer/Components/Pages/ReturnDataFromModal.razor
+++ b/samples/InteractiveServer/Components/Pages/ReturnDataFromModal.razor
@@ -40,7 +40,12 @@
 
     async Task ShowModal()
     {
-        var messageForm = Modal.Show<MessageForm>();
+        var parameters = new ModalParameters
+        {
+            { nameof(MessageForm.TestClass), new TestClass() }
+        };
+        
+        var messageForm = Modal.Show<MessageForm>(parameters);
         var result = await messageForm.Result;
 
         if (!result.Cancelled)
diff --git a/samples/InteractiveServer/Components/Shared/MessageForm.razor b/samples/InteractiveServer/Components/Shared/MessageForm.razor
index 7139a378..368b987a 100644
--- a/samples/InteractiveServer/Components/Shared/MessageForm.razor
+++ b/samples/InteractiveServer/Components/Shared/MessageForm.razor
@@ -12,6 +12,8 @@
 @code {
 
     [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;
+    
+    [Parameter] public TestClass? TestClass { get; set; }
 
     string? Message { get; set; }
 
diff --git a/samples/InteractiveServer/Components/Shared/TestClass.cs b/samples/InteractiveServer/Components/Shared/TestClass.cs
new file mode 100644
index 00000000..7f8553c1
--- /dev/null
+++ b/samples/InteractiveServer/Components/Shared/TestClass.cs
@@ -0,0 +1,22 @@
+namespace InteractiveServer.Components.Shared;
+
+public class TestClass : IEquatable<TestClass?>
+{
+    public int MyProperty { get; set; }
+
+    public override bool Equals(object? obj)
+    {
+        return Equals(obj as TestClass);
+    }
+
+    public bool Equals(TestClass? other)
+    {
+        return other is not null &&
+               MyProperty == other.MyProperty;
+    }
+
+    public override int GetHashCode()
+    {
+        return HashCode.Combine(MyProperty);
+    }
+}
\ No newline at end of file
diff --git a/samples/InteractiveServer/wwwroot/app.css b/samples/InteractiveServer/wwwroot/app.css
index 2bd9b789..be3ab902 100644
--- a/samples/InteractiveServer/wwwroot/app.css
+++ b/samples/InteractiveServer/wwwroot/app.css
@@ -49,3 +49,28 @@ h1:focus {
 .darker-border-checkbox.form-check-input {
     border-color: #929292;
 }
+
+.my-custom-position .blazored-modal {
+    position: absolute;
+    top: 20%;
+    left: 10%;
+}
+
+.my-custom-size {
+    width: 88%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.my-custom-modal-class {
+    background-color: #b6effb;
+    width: 90%;
+    margin-top: 64px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 16px;
+}
+
+.custom-modal-overlay {
+    background-color: rgba(255, 0, 0, 0.5) !important;
+}
diff --git a/samples/InteractiveWebAssembly/wwwroot/css/app.css b/samples/InteractiveWebAssembly/wwwroot/css/app.css
index 54a8aa38..dddccb91 100644
--- a/samples/InteractiveWebAssembly/wwwroot/css/app.css
+++ b/samples/InteractiveWebAssembly/wwwroot/css/app.css
@@ -101,3 +101,28 @@ a, .btn-link {
 code {
     color: #c02d76;
 }
+
+.my-custom-position .blazored-modal {
+    position: absolute;
+    top: 20%;
+    left: 10%;
+}
+
+.my-custom-size {
+    width: 88%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.my-custom-modal-class {
+    background-color: #b6effb;
+    width: 90%;
+    margin-top: 64px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 16px;
+}
+
+.custom-modal-overlay {
+    background-color: rgba(255, 0, 0, 0.5) !important;
+}
diff --git a/src/Blazored.Modal/FocusTrap.razor b/src/Blazored.Modal/FocusTrap.razor
index be61b0af..96d5aa9e 100644
--- a/src/Blazored.Modal/FocusTrap.razor
+++ b/src/Blazored.Modal/FocusTrap.razor
@@ -1,3 +1,4 @@
+<p style="background-color: #0a53be">@_renderCount</p>
 <div class="blazored-modal-focus-trap" @ref="_container" @onkeydown="HandleKeyPresses" @onkeyup="HandleKeyPresses">
     <div tabindex="@(IsActive ? 0 : -1)" @ref="_startSecond" @onfocus="FocusEndAsync"></div>
     <div tabindex="@(IsActive ? 0 : -1)" @ref="_startFirst" @onfocus="FocusEndAsync"></div>
@@ -13,16 +14,22 @@
     private ElementReference _endFirst;
     private ElementReference _endSecond;
     private bool _shiftPressed;
+    private int _renderCount;
 
     [Parameter] public RenderFragment ChildContent { get; set; } = default!;
     [Parameter] public bool IsActive { get; set; }
 
+    protected override bool ShouldRender()
+        => false;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
             await _startFirst.FocusAsync();
         }
+
+        _renderCount++;
     }
 
     internal async Task SetFocus()