Fix for FocusTrap rerendering

Blazored · Feb 20, 2024 · 81b78b2 · 81b78b2
1 parent 953eaa0
commit 81b78b2
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
+    }
+}
diff --git 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
@@ -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
@@ -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()