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.
dubinc · Nov 24, 2024 · d71f579 · d71f579
1 parent 019528f
commit d71f579
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -335,7 +335,8 @@ function LinkQRModalInner({
           variant="secondary"
           text="Cancel"
           className="h-9 w-fit"
-          onClick={() => {
+          onClick={(e) => {
+            e.stopPropagation();
             setShowLinkQRModal(false);
           }}
         />