fix: allow escape to clear/hide search results (#12756)

closes #12750

Author: a-hariti

src/components/mobileMenu/index.tsx

@@ -1,6 +1,6 @@
 'use client';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import {TriangleRightIcon} from '@radix-ui/react-icons';
+import * as Popover from '@radix-ui/react-popover';
 import {Box, Button, Theme} from '@radix-ui/themes';
 import Link from 'next/link';
 
@@ -19,8 +19,8 @@ export function MobileMenu({pathname, searchPlatforms}: Props) {
   return (
     <div className="flex gap-6 items-center">
       <ThemeToggle />
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger asChild>
+      <Popover.Root>
+        <Popover.Trigger asChild>
           <Button
             variant="ghost"
             size="4"
@@ -31,33 +31,33 @@ export function MobileMenu({pathname, searchPlatforms}: Props) {
             Menu
             <TriangleRightIcon />
           </Button>
-        </DropdownMenu.Trigger>
+        </Popover.Trigger>
 
-        <DropdownMenu.Portal>
+        <Popover.Portal>
           <Theme accentColor="iris">
-            <DropdownMenu.Content className={styles.DropdownMenuContent} sideOffset={5}>
+            <Popover.Content className={styles.PopoverContent} sideOffset={5}>
               <Box display={{xs: 'block', sm: 'none'}}>
-                <DropdownMenu.Item className={styles.DropdownMenuItem} asChild>
+                <li className={styles.MenuItem}>
                   <Search path={pathname} searchPlatforms={searchPlatforms} />
-                </DropdownMenu.Item>
-                <DropdownMenu.Separator className={styles.DropdownMenuSeparator} />
+                </li>
+                <div className={styles.MenuSeparator} />
               </Box>
-              <DropdownMenu.Item className={styles.DropdownMenuItem} asChild>
+              <li className={styles.MenuItem}>
                 <Link href="https://sentry.io/changelog/">Changelog</Link>
-              </DropdownMenu.Item>
-              <DropdownMenu.Item className={styles.DropdownMenuItem} asChild>
+              </li>
+              <li className={styles.MenuItem}>
                 <Link href="https://try.sentry-demo.com/demo/start/">Sandbox</Link>
-              </DropdownMenu.Item>
-              <DropdownMenu.Item className={styles.DropdownMenuItem} asChild>
+              </li>
+              <li className={styles.MenuItem}>
                 <Link href="https://sentry.io/">Go to Sentry</Link>
-              </DropdownMenu.Item>
-              <DropdownMenu.Item className={styles.DropdownMenuItem} asChild>
+              </li>
+              <li className={styles.MenuItem}>
                 <Link href="https://sentry.io/signup/">Get Started</Link>
-              </DropdownMenu.Item>
-            </DropdownMenu.Content>
+              </li>
+            </Popover.Content>
           </Theme>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
+        </Popover.Portal>
+      </Popover.Root>
     </div>
   );
 }

src/components/mobileMenu/styles.module.scss

@@ -1,19 +1,17 @@
 :global(.dark) {
-  .DropdownMenuContent,
-  .DropdownMenuSubContent {
+  .PopoverContent {
     background-color: var(--gray-2);
   }
-  .DropdownMenuItem[data-highlighted],
-  .DropdownMenuSeparator {
+  .MenuItem[data-highlighted],
+  .PopoverSeparator {
     background-color: var(--gray-4);
   }
-  .DropdownMenuItem {
+  .MenuItem {
     color: var(--foreground-primary);
   }
 }
 
-.DropdownMenuContent,
-.DropdownMenuSubContent {
+.PopoverContent {
   // the portal is rendered outside the area where the font is defined
   font-family: var(--font-rubik);
   box-sizing: border-box;
@@ -28,7 +26,7 @@
 
   @media screen and (max-width: 768px) {
     padding: 1rem;
-    width: var(--radix-dropdown-menu-content-available-width);
+    width: var(--radix-popover-content-available-width);
 
     input {
       padding: 0.5rem 1rem;
@@ -40,25 +38,23 @@
   }
 }
 
-.DropdownMenuContent[data-side='top'],
-.DropdownMenuSubContent[data-side='top'] {
+.PopoverContent[data-side='top'] {
   animation-name: slideDownAndFade;
 }
 
-.DropdownMenuContent[data-side='right'],
-.DropdownMenuSubContent[data-side='right'] {
+.PopoverContent[data-side='right'] {
   animation-name: slideLeftAndFade;
 }
 
-.DropdownMenuContent[data-side='bottom'] {
+.PopoverContent[data-side='bottom'] {
   animation-name: slideUpAndFade;
 }
 
-.DropdownMenuContent[data-side='left'] {
+.PopoverContent[data-side='left'] {
   animation-name: slideRightAndFade;
 }
 
-.DropdownMenuItem {
+.MenuItem {
   text-decoration: none;
   font-weight: 500;
   font-size: 1rem;
@@ -72,16 +68,23 @@
   position: relative;
   user-select: none;
   outline: none;
+  a {
+    text-decoration: none !important;
+    color: var(--darkPurple);
+  }
+  > div {
+    width: 100%;
+  }
 }
 
-.DropdownMenuItem[data-highlighted] {
+.MenuItem[data-highlighted] {
   background-color: var(--accent-purple-light);
 }
 
-.DropdownMenuSeparator {
+.MenuSeparator {
   height: 1px;
-  background-color: var(--accent-purple-light);
-  margin-top: 0.75rem;
+  background-color: var(--gray-4);
+  margin-top: 1.5rem;
   margin-bottom: 0.75rem;
   margin-left: 1rem;
   margin-right: 1rem;

src/components/search/index.tsx

@@ -299,9 +299,6 @@ export function Search({
             onChange={({target: {value}}) => searchFor(value)}
             onFocus={() => setInputFocus(true)}
             ref={inputRef}
-            onKeyDown={ev => {
-              ev.stopPropagation();
-            }}
           />
           <kbd className={styles['search-hotkey']} data-focused={inputFocus}>
             {inputFocus ? 'esc' : '⌘K'}