From cb9f7c9d17d3049286dd55d6d47715945924f6af Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Thu, 19 Dec 2024 15:55:00 -0500
Subject: [PATCH] stop dropdown event propogation

---
 src/components/molecules/dropdown.tsx                     | 8 ++++++--
 src/components/molecules/languageButton.tsx               | 2 +-
 .../organisms/passageNavigation/index.module.scss         | 1 +
 src/components/organisms/passageNavigation/index.tsx      | 4 ++--
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/dropdown.tsx b/src/components/molecules/dropdown.tsx
index 759cc8ece..8d8e8904f 100644
--- a/src/components/molecules/dropdown.tsx
+++ b/src/components/molecules/dropdown.tsx
@@ -11,7 +11,9 @@ type Props = {
 		isOpen: boolean;
 	}) => JSX.Element;
 	alignment?: 'left' | 'right';
-	children?: ReactNode | ((handleClose: () => void) => ReactNode);
+	children?:
+		| ReactNode
+		| ((handleClose: (event: MouseEvent) => void) => ReactNode);
 };
 
 const LazyMenu = dynamic(() => import('@mui/material/Menu'));
@@ -25,10 +27,12 @@ export default function Dropdown({
 	const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
 
 	const handleClick = (event: MouseEvent) => {
+		event.stopPropagation();
 		setAnchorEl(event.currentTarget);
 	};
 
-	const handleClose = () => {
+	const handleClose = (event: MouseEvent) => {
+		event?.stopPropagation();
 		setAnchorEl(null);
 	};
 
diff --git a/src/components/molecules/languageButton.tsx b/src/components/molecules/languageButton.tsx
index 70e1b74a0..b87fb2dd7 100644
--- a/src/components/molecules/languageButton.tsx
+++ b/src/components/molecules/languageButton.tsx
@@ -51,7 +51,7 @@ export default function LanguageButton({
 							<a
 								onClick={(e) => {
 									e.preventDefault();
-									handleClose();
+									handleClose(e);
 									onClick(LANGUAGES[id].base_urls[0]);
 								}}
 							>
diff --git a/src/components/organisms/passageNavigation/index.module.scss b/src/components/organisms/passageNavigation/index.module.scss
index 0e2760f3f..4b30ee18e 100644
--- a/src/components/organisms/passageNavigation/index.module.scss
+++ b/src/components/organisms/passageNavigation/index.module.scss
@@ -20,6 +20,7 @@
 	gap: 10px;
 	align-items: center;
 	justify-content: space-between;
+	cursor: pointer;
 
 	h4 {
 		margin: 0;
diff --git a/src/components/organisms/passageNavigation/index.tsx b/src/components/organisms/passageNavigation/index.tsx
index 47b8c50a0..302512661 100644
--- a/src/components/organisms/passageNavigation/index.tsx
+++ b/src/components/organisms/passageNavigation/index.tsx
@@ -101,9 +101,9 @@ export default function PassageNavigation({
 								<p key={version.id}>
 									<Button
 										type="tertiary"
-										onClick={() => {
+										onClick={(e) => {
 											setSelectedVersion(version);
-											handleClose();
+											handleClose(e);
 										}}
 										text={getBibleAcronym(version.title)}
 									/>