Add FocusTrap to dropdown menu to fix filtering

src-web/components/Overlay.tsx

@@ -12,6 +12,7 @@ interface Props {
   onClose?: () => void;
   zIndex?: keyof typeof zIndexes;
   variant?: 'default' | 'transparent';
+  noBackdrop?: boolean;
 }
 
 const zIndexes: Record<number, string> = {
@@ -28,8 +29,21 @@ export function Overlay({
   open,
   onClose,
   portalName,
+  noBackdrop,
   children,
 }: Props) {
+  if (noBackdrop) {
+    return (
+      <Portal name={portalName}>
+        {open && (
+          <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
+            {/* NOTE: <div> wrapper is required for some reason, or FocusTrap complains */}
+            <div>{children}</div>
+          </FocusTrap>
+        )}
+      </Portal>
+    );
+  }
   return (
     <Portal name={portalName}>
       {open && (
@@ -48,7 +62,7 @@ export function Overlay({
               )}
             />
 
-            {/* Show draggable region at the top */}
+            {/* Show the draggable region at the top */}
             {/* TODO: Figure out tauri drag region and also make clickable still */}
             {variant === 'default' && (
               <div data-tauri-drag-region className="absolute top-0 left-0 h-md right-0" />

src-web/components/core/Dropdown.tsx

@@ -11,11 +11,11 @@ import type {
   SetStateAction,
 } from 'react';
 import React, {
-  useEffect,
   Children,
   cloneElement,
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -27,7 +27,7 @@ import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useHotKey } from '../../hooks/useHotKey';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { getNodeText } from '../../lib/getNodeText';
-import { Portal } from '../Portal';
+import { Overlay } from '../Overlay';
 import { Button } from './Button';
 import { HotKey } from './HotKey';
 import { Icon } from './Icon';
@@ -446,9 +446,9 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
             ),
         )}
         {isOpen && (
-          <Portal name="dropdown-menu">
-            <div ref={menuRef} className="x-theme-menu">
+          <Overlay noBackdrop open={isOpen} portalName="dropdown-menu">
             <motion.div
+              ref={menuRef}
               tabIndex={0}
               onKeyDown={handleMenuKeyDown}
               onContextMenu={(e) => {
@@ -464,6 +464,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
               style={styles.container}
               className={classNames(
                 className,
+                'x-theme-menu',
                 'outline-none my-1 pointer-events-auto fixed z-50',
               )}
             >
@@ -517,8 +518,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
                 })}
               </VStack>
             </motion.div>
-            </div>
-          </Portal>
+          </Overlay>
         )}
       </>
     );

src-web/components/core/Editor/extensions.ts

@@ -105,7 +105,6 @@ export function getLanguageExtension({
     return graphql();
   }
 
-  console.log("SELECTING SYNTAX", language);
   const base = syntaxExtensions[language ?? 'text'] ?? text();
   if (!useTemplating) {
     return base;