From 6b30fd02b7745449329ae2c17318fe68f191fd18 Mon Sep 17 00:00:00 2001
From: Giancarlo Sierra <gian7sm@hotmail.com>
Date: Mon, 2 Oct 2023 14:51:27 -0700
Subject: [PATCH] Control background click mouse events (#523)

Mouse click, down, and up events will be handled to avoid closing the modal by accident.
This avoids accidents when highlighting text and dragging the mouse cursor outside of the modal area (into the background).

Solves #518

This also allows the user to escape closing the modal by dragging the mouse click back into the modal content area.

Co-authored-by: Chris Sainty <chrissainty@users.noreply.github.com>
---
 src/Blazored.Modal/BlazoredModalInstance.razor    |  8 +++++---
 src/Blazored.Modal/BlazoredModalInstance.razor.cs | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor b/src/Blazored.Modal/BlazoredModalInstance.razor
index 721cae30..aa9f7d08 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor
@@ -7,11 +7,13 @@
 else
 {
     <div class="bm-container @Position @OverlayCustomClass @OverlayAnimationClass"
-         @ref="_modalReference" 
-         @onclick="HandleBackgroundClick">
+        @ref="_modalReference"
+        @onmousedown="ListenToBackgroundClick"
+        @onmouseup="HandleBackgroundClick"
+        @onclick="StopListeningToBackgroundClick">
 
         <FocusTrap @ref="FocusTrap" IsActive="ActivateFocusTrap">
-            <div class="@ModalClass" role="dialog" aria-modal="true" @onclick:stopPropagation="true">
+            <div class="@ModalClass" role="dialog" aria-modal="true" @onmouseup:stopPropagation="true" @onmousedown:stopPropagation="true">
                 @if (!HideHeader)
                 {
                     <div class="bm-header">
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.cs b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
index 5fc5ca2c..e0b9e889 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.cs
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
@@ -31,6 +31,7 @@ public partial class BlazoredModalInstance : IDisposable
     private ElementReference _modalReference;
     private bool _setFocus;
     private bool _disableNextRender;
+    private bool _listenToBackgroundClicks;
 
     // Temporarily add a tabindex of -1 to the close button so it doesn't get selected as the first element by activateFocusTrap
     private readonly Dictionary<string, object> _closeBtnAttributes = new() { { "tabindex", "-1" } };
@@ -334,9 +335,19 @@ private async Task HandleBackgroundClick()
             return;
         }
 
-        await CancelAsync();
+        if (_listenToBackgroundClicks)
+        {
+            await CancelAsync();
+            _listenToBackgroundClicks = false;
+        }
     }
 
+    private void ListenToBackgroundClick()
+    => _listenToBackgroundClicks = true;
+
+    private void StopListeningToBackgroundClick()
+        => _listenToBackgroundClicks = false;
+
     void IDisposable.Dispose() 
         => Parent.OnModalClosed -= AttemptFocus;
 }
\ No newline at end of file