fix: modals closing when trying to click interactive elements

spacebarchat · Aug 31, 2023 · db94f52 · db94f52
1 parent f983643
commit db94f52
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/components/modals/CreateServerModal.tsx b/src/components/modals/CreateServerModal.tsx
@@ -133,7 +133,11 @@ function CreateServerModal(props: AnimatedModalProps) {
 	});
 
 	return (
-		<Modal {...props}>
+		<Modal
+			{...props}
+			// used for clicking outside of the modal to close it
+			onClose={closeAllModals}
+		>
 			<ModalCloseWrapper>
 				<button
 					onClick={closeAllModals}

diff --git a/src/components/modals/JoinServerModal.tsx b/src/components/modals/JoinServerModal.tsx
@@ -90,7 +90,11 @@ function JoinServerModal(props: AnimatedModalProps) {
 	});
 
 	return (
-		<Modal {...props}>
+		<Modal
+			{...props}
+			// used for clicking outside of the modal to close it
+			onClose={closeAllModals}
+		>
 			<ModalCloseWrapper>
 				<button
 					onClick={closeAllModals}

diff --git a/src/components/modals/ModalComponents.tsx b/src/components/modals/ModalComponents.tsx
@@ -173,6 +173,10 @@ interface ModalProps extends StackedModalProps {
 	children: React.ReactNode;
 	full?: boolean;
 	onClick?: () => void;
+	/**
+	 * Custom callback for when a modal is closed by clicking the background overlay
+	 */
+	onClose?: () => void;
 	style?: React.CSSProperties;
 }
 
@@ -196,8 +200,10 @@ export function Modal(props: ModalProps) {
 					initial="hide"
 					animate="show"
 					exit="hide"
-					onClick={() => {
-						closeModal();
+					onClick={(e) => {
+						if (e.target !== e.currentTarget) return;
+						if (props.onClose) props.onClose();
+						else closeModal();
 					}}
 					{...props}
 				>