Dropdown bug fixed (#353)

Co-authored-by: Cody's Dad <[email protected]>

components/Dropdown/dropdown.js

@@ -1,17 +1,30 @@
-import React, {useState} from 'react';
+import React, {useState,useRef,useEffect} from 'react';
 
 function Dropdown({ active, items, setOptions, setOptions2 }) {
     const [show, setShow] = useState(false)
+	const dropdownRef = useRef(null);
+	useEffect(() => {
+		//  This checks if the click event occurred outside the dropdown, if true we closes the dropdown. 
+		function handleClickOutside(event) {
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+				setShow(false);
+			}
+		}
+		document.addEventListener('mousedown', handleClickOutside);
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [dropdownRef]);
 	return (
-		<div class='relative inline-block w-full'>
+		<div class='relative inline-block w-full' ref={dropdownRef}>
 			<div className='w-full'>
 				<button
 					type='button'
 					className='flex justify-between text-white p-4 w-full justify-center gap-x-1.5 shadow-sm card-bg hover:bg-gray-50 gradient-bg no-border rounded-md'
 					id='menu-button'
 					aria-expanded='true'
 					aria-haspopup='true'
-					onClick={() => setShow(true)}
+					onClick={() => setShow(!show)}
 				>
 					<div>{active}</div>
 					<svg