QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-19 12:04:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix modal closing on color picker drag #1869 (#1931)

Browse Source 
* 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
This commit is contained in:
Bryan McKnight
2025-03-03 15:37:12 -06:00
committed by GitHub
parent 4e96ca8376
commit cf0e573533
4 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/views/shared/_drawer.html.erb
View File

@@ -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>

2
app/views/shared/_modal.html.erb
View File

@@ -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>

2
app/views/shared/_modal_form.html.erb
View File

@@ -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? %>