stop dropdown event propogation

audioverse-org · Dec 19, 2024 · cb9f7c9 · cb9f7c9
1 parent 7ba75bc
commit cb9f7c9
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)}
 									/>