Dropdown bug fixed (asyncapi#353)

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

components/Dropdown/dropdown.js

@@ -1,7 +1,20 @@
-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 className='relative inline-block w-full'>
 			<div className='w-full'>
@@ -11,7 +24,7 @@ function Dropdown({ active, items, setOptions, setOptions2 }) {
 					id='menu-button'
 					aria-expanded='true'
 					aria-haspopup='true'
-					onClick={() => setShow(true)}
+					onClick={() => setShow(!show)}
 				>
 					<div>{active}</div>
 					<svg