Merge pull request #171 from beyzanur-seyhan/164_displaying_dopdown_menu

🐛 Fixed "Dropdown menu stays open"

Author: max-programming

components/Sort.tsx

@@ -75,6 +75,13 @@ export default function Sort() {
       return SortTypes.BestMatch;
     }
   };
+
+  const handleClick = () => {
+    const elem = document.activeElement as HTMLElement;
+    if (elem) {
+      elem?.blur();
+    }
+  };
   return (
     <div className="flex justify-center items-center mb-8 flex-col gap-2">
       <div className="dropdown dropdown-hover">
@@ -85,10 +92,10 @@ export default function Sort() {
           ></FontAwesomeIcon>
           Language
         </Button>
-        <div className="h-64 p-2 overflow-y-scroll shadow dropdown-content z-50 bg-base-100 rounded-box w-60">
+        <div className="h-64 p-2 overflow-y-scroll dropdown-content shadow z-50 bg-base-100 rounded-box w-60">
           <ul tabIndex={0} className="menu menu-vertical">
             {mainLanguages.sort(sortByName).map(language => (
-              <li key={language}>
+              <li key={language} onClick={handleClick}>
                 <Link href={`/repos/${language.toLowerCase()}`}>
                   {language}
                 </Link>
@@ -114,7 +121,7 @@ export default function Sort() {
                 delete query.s;
               }
               return (
-                <li key={index}>
+                <li key={index}  onClick={handleClick}>
                   <Link href={{ query }}>{item.name}</Link>
                 </li>
               );