From cf0e57353382d2315e959d811f77989400fdb08e Mon Sep 17 00:00:00 2001
From: Bryan McKnight <github.absurd854@passmail.net>
Date: Mon, 3 Mar 2025 15:37:12 -0600
Subject: [PATCH] Fix modal closing on color picker drag #1869 (#1931)

* Replaced data-action click event with data-action mousedown to prevent the modal from hiding on mouse up whenever mouse down starts within the modal

* Changed click events to mousedown within dialog elements to trigger the closing of the element
---
 app/views/account/transactions/bulk_edit.html.erb | 4 ++--
 app/views/shared/_drawer.html.erb                 | 4 ++--
 app/views/shared/_modal.html.erb                  | 2 +-
 app/views/shared/_modal_form.html.erb             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/views/account/transactions/bulk_edit.html.erb b/app/views/account/transactions/bulk_edit.html.erb
index b8317084..ed9a6194 100644
--- a/app/views/account/transactions/bulk_edit.html.erb
+++ b/app/views/account/transactions/bulk_edit.html.erb
@@ -1,12 +1,12 @@
 <%= turbo_frame_tag "bulk_transaction_edit_drawer" do %>
   <dialog data-controller="modal"
-          data-action="click->modal#clickOutside"
+          data-action="mousedown->modal#clickOutside"
     class="bg-white shadow-border-xs rounded-2xl max-h-[calc(100vh-32px)] h-full max-w-[480px] w-full mt-4 mr-4 ml-auto">
     <%= styled_form_with url: bulk_update_account_transactions_path, scope: "bulk_update", class: "h-full", data: { turbo_frame: "_top" } do |form| %>
       <div class="flex h-full flex-col justify-between p-4 gap-4">
         <div>
           <div class="flex h-9 items-center justify-end">
-            <div data-action="click->modal#close" class="cursor-pointer">
+            <div data-action="mousedown->modal#close" class="cursor-pointer">
               <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
             </div>
           </div>
diff --git a/app/views/shared/_drawer.html.erb b/app/views/shared/_drawer.html.erb
index 35e225c2..4da7ccb0 100644
--- a/app/views/shared/_drawer.html.erb
+++ b/app/views/shared/_drawer.html.erb
@@ -3,11 +3,11 @@
 <%= turbo_frame_tag "drawer" do %>
   <dialog class="ml-auto bg-white shadow-border-xs rounded-2xl max-w-[480px] h-full w-full mt-4 mr-4 focus-visible:outline-hidden"
     data-controller="modal"
-    data-action="click->modal#clickOutside"
+    data-action="mousedown->modal#clickOutside"
     data-modal-reload-on-close-value="<%= reload_on_close %>">
     <div class="flex flex-col h-full gap-4">
       <div class="flex justify-end items-center p-4">
-        <div data-action="click->modal#close" class="cursor-pointer p-2">
+        <div data-action="mousedown->modal#close" class="cursor-pointer p-2">
           <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
         </div>
       </div>
diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb
index dc0c5e90..2eb1b693 100644
--- a/app/views/shared/_modal.html.erb
+++ b/app/views/shared/_modal.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (content:, classes:) -%>
 <%= turbo_frame_tag "modal" do %>
-  <dialog class="m-auto bg-white shadow-border-xs rounded-2xl max-w-[580px] w-min-content h-fit overflow-visible <%= classes %>" data-controller="modal" data-action="click->modal#clickOutside">
+  <dialog class="m-auto bg-white shadow-border-xs rounded-2xl max-w-[580px] w-min-content h-fit overflow-visible <%= classes %>" data-controller="modal" data-action="mousedown->modal#clickOutside">
     <div class="flex flex-col">
       <%= content %>
     </div>
diff --git a/app/views/shared/_modal_form.html.erb b/app/views/shared/_modal_form.html.erb
index a3d5456b..98d9b598 100644
--- a/app/views/shared/_modal_form.html.erb
+++ b/app/views/shared/_modal_form.html.erb
@@ -5,7 +5,7 @@
     <div class="space-y-2">
       <header class="flex justify-between items-center">
         <h2 class="font-medium"><%= title %></h2>
-        <%= lucide_icon("x", class: "cursor-pointer w-5 h-5 text-secondary", data: { action: "click->modal#close" }) %>
+        <%= lucide_icon("x", class: "cursor-pointer w-5 h-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
       </header>
 
       <% if subtitle.present? %>