From d71f579fcaf83fe74ef1bfe3ef147b41e921f92a Mon Sep 17 00:00:00 2001
From: unrenamed <renkonazbka@gmail.com>
Date: Sun, 24 Nov 2024 13:32:13 +0200
Subject: [PATCH 1/2] fix: prevent parent drawers from closing when canceling
nested drawers
Ensure the "Cancel" button in nested drawers stops event propagation to avoid unintentionally closing parent drawers. Addresses unintended event bubbling within Vaul's drawer components. Has the same effect on Radix dialog components, although does not affect the UI behavior.
---
apps/web/ui/modals/accept-invite-modal.tsx | 3 ++-
apps/web/ui/modals/add-bank-account-modal.tsx | 5 ++++-
apps/web/ui/modals/deposit-funds-modal.tsx | 5 ++++-
apps/web/ui/modals/link-builder/advanced-modal.tsx | 8 ++++++--
apps/web/ui/modals/link-builder/expiration-modal.tsx | 6 ++++--
apps/web/ui/modals/link-builder/og-modal.tsx | 6 ++++--
apps/web/ui/modals/link-builder/password-modal.tsx | 6 ++++--
apps/web/ui/modals/link-builder/targeting-modal.tsx | 6 ++++--
apps/web/ui/modals/link-builder/utm-modal.tsx | 3 ++-
apps/web/ui/modals/link-qr-modal.tsx | 3 ++-
10 files changed, 36 insertions(+), 15 deletions(-)
diff --git a/apps/web/ui/modals/accept-invite-modal.tsx b/apps/web/ui/modals/accept-invite-modal.tsx
index 18be07adcd..aecb4fd6a7 100644
--- a/apps/web/ui/modals/accept-invite-modal.tsx
+++ b/apps/web/ui/modals/accept-invite-modal.tsx
@@ -89,7 +89,8 @@ function AcceptInviteModal({
<div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16">
<Button
text="Back to dashboard"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
router.push("/");
setShowAcceptInviteModal(false);
}}
diff --git a/apps/web/ui/modals/add-bank-account-modal.tsx b/apps/web/ui/modals/add-bank-account-modal.tsx
index bf496c18b8..7c14338a13 100644
--- a/apps/web/ui/modals/add-bank-account-modal.tsx
+++ b/apps/web/ui/modals/add-bank-account-modal.tsx
@@ -140,7 +140,10 @@ const AddBankAccountForm = ({ closeModal }: AddBankAccountFormProps) => {
text="Cancel"
className="h-9 w-fit"
disabled={isSubmitting || isExecuting}
- onClick={closeModal}
+ onClick={(e) => {
+ e.stopPropagation();
+ closeModal();
+ }}
/>
<Button
diff --git a/apps/web/ui/modals/deposit-funds-modal.tsx b/apps/web/ui/modals/deposit-funds-modal.tsx
index 899d648a1f..4645a14477 100644
--- a/apps/web/ui/modals/deposit-funds-modal.tsx
+++ b/apps/web/ui/modals/deposit-funds-modal.tsx
@@ -105,7 +105,10 @@ const DepositFundsForm = ({ closeModal }: { closeModal: () => void }) => {
text="Cancel"
className="h-9 w-fit"
disabled={isSubmitting || isExecuting}
- onClick={closeModal}
+ onClick={(e) => {
+ e.stopPropagation();
+ closeModal();
+ }}
/>
<Button
diff --git a/apps/web/ui/modals/link-builder/advanced-modal.tsx b/apps/web/ui/modals/link-builder/advanced-modal.tsx
index 383f195678..36d3cff038 100644
--- a/apps/web/ui/modals/link-builder/advanced-modal.tsx
+++ b/apps/web/ui/modals/link-builder/advanced-modal.tsx
@@ -176,7 +176,8 @@ function AdvancedModal({
<button
type="button"
className="text-xs font-medium text-gray-700 transition-colors hover:text-gray-950"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
setValueParent("externalId", null, { shouldDirty: true });
setValueParent("identifier", null, { shouldDirty: true });
setShowAdvancedModal(false);
@@ -192,7 +193,10 @@ function AdvancedModal({
variant="secondary"
text="Cancel"
className="h-9 w-fit"
- onClick={() => setShowAdvancedModal(false)}
+ onClick={(e) => {
+ e.stopPropagation();
+ setShowAdvancedModal(false)
+ }}
/>
<Button
type="submit"
diff --git a/apps/web/ui/modals/link-builder/expiration-modal.tsx b/apps/web/ui/modals/link-builder/expiration-modal.tsx
index 35c4b45848..4b9ba4439f 100644
--- a/apps/web/ui/modals/link-builder/expiration-modal.tsx
+++ b/apps/web/ui/modals/link-builder/expiration-modal.tsx
@@ -231,7 +231,8 @@ function ExpirationModal({
<button
type="button"
className="text-xs font-medium text-gray-700 transition-colors hover:text-gray-950"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
setValueParent("expiresAt", null, { shouldDirty: true });
setValueParent("expiredUrl", null, { shouldDirty: true });
setShowExpirationModal(false);
@@ -247,7 +248,8 @@ function ExpirationModal({
variant="secondary"
text="Cancel"
className="h-9 w-fit"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
reset();
setShowExpirationModal(false);
}}
diff --git a/apps/web/ui/modals/link-builder/og-modal.tsx b/apps/web/ui/modals/link-builder/og-modal.tsx
index 66a6101a1a..f23f429cb1 100644
--- a/apps/web/ui/modals/link-builder/og-modal.tsx
+++ b/apps/web/ui/modals/link-builder/og-modal.tsx
@@ -436,7 +436,8 @@ function OGModalInner({
<button
type="button"
className="text-xs font-medium text-gray-700 transition-colors hover:text-gray-950"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
setValueParent("proxy", false, { shouldDirty: true });
setShowOGModal(false);
}}
@@ -451,7 +452,8 @@ function OGModalInner({
variant="secondary"
text="Cancel"
className="h-9 w-fit"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
reset();
setShowOGModal(false);
}}
diff --git a/apps/web/ui/modals/link-builder/password-modal.tsx b/apps/web/ui/modals/link-builder/password-modal.tsx
index b6c204ada4..86938a0170 100644
--- a/apps/web/ui/modals/link-builder/password-modal.tsx
+++ b/apps/web/ui/modals/link-builder/password-modal.tsx
@@ -176,7 +176,8 @@ function PasswordModalInner({
<button
type="button"
className="text-xs font-medium text-gray-700 transition-colors hover:text-gray-950"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
setValueParent("password", null, { shouldDirty: true });
setShowPasswordModal(false);
}}
@@ -191,7 +192,8 @@ function PasswordModalInner({
variant="secondary"
text="Cancel"
className="h-9 w-fit"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
reset();
setShowPasswordModal(false);
}}
diff --git a/apps/web/ui/modals/link-builder/targeting-modal.tsx b/apps/web/ui/modals/link-builder/targeting-modal.tsx
index f41d2d98d1..5d0168aa31 100644
--- a/apps/web/ui/modals/link-builder/targeting-modal.tsx
+++ b/apps/web/ui/modals/link-builder/targeting-modal.tsx
@@ -365,7 +365,8 @@ function TargetingModal({
<button
type="button"
className="text-xs font-medium text-gray-700 transition-colors hover:text-gray-950"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
setValueParent("ios", null, { shouldDirty: true });
setValueParent("android", null, { shouldDirty: true });
setValueParent("geo", null, { shouldDirty: true });
@@ -382,7 +383,8 @@ function TargetingModal({
variant="secondary"
text="Cancel"
className="h-9 w-fit"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
reset();
setShowTargetingModal(false);
}}
diff --git a/apps/web/ui/modals/link-builder/utm-modal.tsx b/apps/web/ui/modals/link-builder/utm-modal.tsx
index 6763160c17..cf25f87162 100644
--- a/apps/web/ui/modals/link-builder/utm-modal.tsx
+++ b/apps/web/ui/modals/link-builder/utm-modal.tsx
@@ -255,7 +255,8 @@ function UTMModalInner({ setShowUTMModal }: UTMModalProps) {
variant="secondary"
text="Cancel"
className="h-9 w-fit"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
reset();
setShowUTMModal(false);
}}
diff --git a/apps/web/ui/modals/link-qr-modal.tsx b/apps/web/ui/modals/link-qr-modal.tsx
index f9d08822e1..b830ec81c3 100644
--- a/apps/web/ui/modals/link-qr-modal.tsx
+++ b/apps/web/ui/modals/link-qr-modal.tsx
@@ -335,7 +335,8 @@ function LinkQRModalInner({
variant="secondary"
text="Cancel"
className="h-9 w-fit"
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation();
setShowLinkQRModal(false);
}}
/>
From 9ce1112341972e5fdc8303123dd33d38add99286 Mon Sep 17 00:00:00 2001
From: unrenamed <renkonazbka@gmail.com>
Date: Sun, 24 Nov 2024 15:14:40 +0200
Subject: [PATCH 2/2] fix: apply Prettier formatting
---
apps/web/ui/modals/link-builder/advanced-modal.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/apps/web/ui/modals/link-builder/advanced-modal.tsx b/apps/web/ui/modals/link-builder/advanced-modal.tsx
index 36d3cff038..6fca1754b2 100644
--- a/apps/web/ui/modals/link-builder/advanced-modal.tsx
+++ b/apps/web/ui/modals/link-builder/advanced-modal.tsx
@@ -195,7 +195,7 @@ function AdvancedModal({
className="h-9 w-fit"
onClick={(e) => {
e.stopPropagation();
- setShowAdvancedModal(false)
+ setShowAdvancedModal(false);
}}
/>
<Button