From c1b41d825156ddbc6e25e677a8f2a4237f9c8c21 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Mon, 17 Oct 2022 20:05:00 +0100
Subject: [PATCH] Wrong focus ring on Help Dropdown (#5049)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
Co-authored-by: MuriloAmarals <muralha2000@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Rafael <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Grace Nshokano <grace.devolop@gmail.com>
Co-authored-by: Matheus Muniz <matheusmuniz100@hotmail.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: C000Ldude <coolmagnas@gmail.com>
Co-authored-by: Klinger Matheus <50892465+KlingerMatheus@users.noreply.github.com>
Co-authored-by: Eman <emmanuelgatwech@gmail.com>
Co-authored-by: Alan <alannnc@gmail.com>
---
 packages/ui/v2/core/Shell.tsx | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index e2a0c73683..c988cde284 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -233,7 +233,7 @@ function UserDropdown({ small }: { small?: boolean }) {
     return null;
   }
   return (
-    <Dropdown open={menuOpen} onOpenChange={() => setHelpOpen(false)}>
+    <Dropdown open={menuOpen}>
       <DropdownMenuTrigger asChild onClick={() => setMenuOpen(true)}>
         <button className="group flex w-full cursor-pointer appearance-none items-center rounded-full p-2 text-left outline-none hover:bg-gray-100 sm:pl-3 md:rounded-none lg:pl-2">
           <span
@@ -280,7 +280,10 @@ function UserDropdown({ small }: { small?: boolean }) {
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
         <DropdownMenuContent
-          onInteractOutside={() => setMenuOpen(false)}
+          onInteractOutside={() => {
+            setMenuOpen(false);
+            setHelpOpen(false);
+          }}
           className="overflow-hidden rounded-md">
           {helpOpen ? (
             <HelpMenuItem onHelpItemSelect={() => onHelpItemSelect()} />
@@ -338,21 +341,21 @@ function UserDropdown({ small }: { small?: boolean }) {
                   <Icon.FiMap className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" /> {t("visit_roadmap")}
                 </a>
               </DropdownMenuItem>
+              <DropdownMenuItem>
+                <button
+                  onClick={() => setHelpOpen(true)}
+                  className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+                  <Icon.FiHelpCircle
+                    className={classNames(
+                      "text-gray-500 group-hover:text-neutral-500",
+                      "h-4 w-4 flex-shrink-0 ltr:mr-2"
+                    )}
+                    aria-hidden="true"
+                  />
 
-              <button
-                className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-                onClick={() => setHelpOpen(true)}>
-                <Icon.FiHelpCircle
-                  className={classNames(
-                    "text-gray-500 group-hover:text-neutral-500",
-                    "h-4 w-4 flex-shrink-0 ltr:mr-2"
-                  )}
-                  aria-hidden="true"
-                />
-
-                {t("help")}
-              </button>
-
+                  {t("help")}
+                </button>
+              </DropdownMenuItem>
               <DropdownMenuItem>
                 <a
                   target="_blank"