Improve Dropdown selection handling

src-web/components/RecentRequestsDropdown.tsx

@@ -22,8 +22,7 @@ interface Props {
 export function RecentRequestsDropdown({ className }: Props) {
   const activeRequest = useActiveRequest();
   const dropdownRef = useRef<DropdownRef>(null);
-  const [allRecentRequestIds] = useRecentRequests();
+  const [recentRequestIds] = useRecentRequests();
-  const recentRequestIds = useMemo(() => allRecentRequestIds.slice(1), [allRecentRequestIds]);
 
   // Handle key-up
   useKeyPressEvent('Control', undefined, () => {
@@ -32,8 +31,13 @@ export function RecentRequestsDropdown({ className }: Props) {
   });
 
   useHotKey('request_switcher.prev', () => {
-    if (!dropdownRef.current?.isOpen) dropdownRef.current?.open();
+    if (!dropdownRef.current?.isOpen) {
-    dropdownRef.current?.next?.();
+      dropdownRef.current?.open();
+      // Select the second because the first is the current request
+      dropdownRef.current?.next?.(2);
+    } else {
+      dropdownRef.current?.next?.();
+    }
   });
 
   useHotKey('request_switcher.next', () => {
@@ -83,7 +87,6 @@ export function RecentRequestsDropdown({ className }: Props) {
   return (
     <Dropdown ref={dropdownRef} items={items}>
       <Button
-        data-tauri-drag-region
         size="sm"
         hotkeyAction="request_switcher.toggle"
         className={classNames(

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,
@@ -71,8 +71,8 @@ export interface DropdownRef {
   open: () => void;
   toggle: () => void;
   close?: () => void;
-  next?: () => void;
+  next?: (incrBy?: number) => void;
-  prev?: () => void;
+  prev?: (incrBy?: number) => void;
   select?: () => void;
 }
 
@@ -81,15 +81,23 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
   ref,
 ) {
   const [isOpen, _setIsOpen] = useState<boolean>(false);
-  const [defaultSelectedIndex, setDefaultSelectedIndex] = useState<number>();
+  const [defaultSelectedIndex, setDefaultSelectedIndex] = useState<number | null>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<Omit<DropdownRef, 'open'>>(null);
 
   const setIsOpen = useCallback(
     (o: SetStateAction<boolean>) => {
-      _setIsOpen(o);
+      _setIsOpen((prev) => {
-      if (o) onOpen?.();
+        const newIsOpen = typeof o === 'function' ? o(prev) : o;
-      else onClose?.();
+
+        if (newIsOpen) onOpen?.();
+        else onClose?.();
+
+        // Set to different value when opened and closed to force it to update. This is to force
+        // <Menu/> to reset its selected-index state, which it does when this prop changes
+        setDefaultSelectedIndex(newIsOpen ? -1 : null);
+        return newIsOpen;
+      });
     },
     [onClose, onOpen],
   );
@@ -97,14 +105,16 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
   const handleClose = useCallback(() => {
     setIsOpen(false);
     buttonRef.current?.focus();
-    // Reset so it triggers a render if opening sets to 0, for example
-    setDefaultSelectedIndex(undefined);
   }, [setIsOpen]);
 
+  // Pull into variable so linter forces us to add it as a hook dep to useImperativeHandle. If we don't,
+  // the ref will not update when menuRef updates, causing stale callback state to be used.
+  const menuRefCurrent = menuRef.current;
+
   useImperativeHandle(
     ref,
     () => ({
-      ...menuRef.current,
+      ...menuRefCurrent,
       isOpen: isOpen,
       toggle() {
         if (!isOpen) this.open();
@@ -117,7 +127,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
         handleClose();
       },
     }),
-    [handleClose, isOpen, setIsOpen],
+    [handleClose, isOpen, setIsOpen, menuRefCurrent],
   );
 
   useHotKey(hotKeyAction ?? null, () => {
@@ -132,12 +142,11 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
       ...existingChild.props,
       ref: buttonRef,
       'aria-haspopup': 'true',
-      onMouseDown:
+      onClick:
         existingChild.props?.onClick ??
         ((e: MouseEvent<HTMLButtonElement>) => {
           e.preventDefault();
           e.stopPropagation();
-          setDefaultSelectedIndex(undefined);
           setIsOpen((o) => !o); // Toggle dropdown
         }),
     };
@@ -200,6 +209,7 @@ export const ContextMenu = forwardRef<DropdownRef, ContextMenuProps>(function Co
     <Menu
       isOpen={true} // Always open because we return null if not
       className={className}
+      defaultSelectedIndex={null}
       ref={ref}
       items={items}
       onClose={onClose}
@@ -210,7 +220,7 @@ export const ContextMenu = forwardRef<DropdownRef, ContextMenuProps>(function Co
 
 interface MenuProps {
   className?: string;
-  defaultSelectedIndex?: number;
+  defaultSelectedIndex: number | null;
   triggerShape: Pick<DOMRect, 'top' | 'bottom' | 'left' | 'right'> | null;
   onClose: () => void;
   showTriangle?: boolean;
@@ -243,9 +253,8 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
 
     const handleClose = useCallback(() => {
       onClose();
-      setSelectedIndex(null);
       setFilter('');
-    }, [onClose, setSelectedIndex]);
+    }, [onClose]);
 
     // Close menu on space bar
     const handleMenuKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
@@ -272,39 +281,45 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
       [isOpen, filter, setFilter, handleClose],
     );
 
-    const handlePrev = useCallback(() => {
+    const handlePrev = useCallback(
-      setSelectedIndex((currIndex) => {
+      (incrBy = 1) => {
-        let nextIndex = (currIndex ?? 0) - 1;
+        setSelectedIndex((currIndex) => {
-        const maxTries = items.length;
+          let nextIndex = (currIndex ?? 0) - incrBy;
-        for (let i = 0; i < maxTries; i++) {
+          const maxTries = items.length;
-          if (items[nextIndex]?.hidden || items[nextIndex]?.type === 'separator') {
+          for (let i = 0; i < maxTries; i++) {
-            nextIndex--;
+            if (items[nextIndex]?.hidden || items[nextIndex]?.type === 'separator') {
-          } else if (nextIndex < 0) {
+              nextIndex--;
-            nextIndex = items.length - 1;
+            } else if (nextIndex < 0) {
-          } else {
+              nextIndex = items.length - 1;
-            break;
+            } else {
+              break;
+            }
           }
-        }
+          return nextIndex;
-        return nextIndex;
+        });
-      });
+      },
-    }, [items, setSelectedIndex]);
+      [items, setSelectedIndex],
+    );
 
-    const handleNext = useCallback(() => {
+    const handleNext = useCallback(
-      setSelectedIndex((currIndex) => {
+      (incrBy: number = 1) => {
-        let nextIndex = (currIndex ?? -1) + 1;
+        setSelectedIndex((currIndex) => {
-        const maxTries = items.length;
+          let nextIndex = (currIndex ?? -1) + incrBy;
-        for (let i = 0; i < maxTries; i++) {
+          const maxTries = items.length;
-          if (items[nextIndex]?.hidden || items[nextIndex]?.type === 'separator') {
+          for (let i = 0; i < maxTries; i++) {
-            nextIndex++;
+            if (items[nextIndex]?.hidden || items[nextIndex]?.type === 'separator') {
-          } else if (nextIndex >= items.length) {
+              nextIndex++;
-            nextIndex = 0;
+            } else if (nextIndex >= items.length) {
-          } else {
+              nextIndex = 0;
-            break;
+            } else {
+              break;
+            }
           }
-        }
+          return nextIndex;
-        return nextIndex;
+        });
-      });
+      },
-    }, [items, setSelectedIndex]);
+      [items, setSelectedIndex],
+    );
 
     useKey(
       'ArrowUp',
@@ -341,20 +356,18 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
       [handleClose, setSelectedIndex],
     );
 
-    useImperativeHandle(
+    useImperativeHandle(ref, () => {
-      ref,
+      return {
-      () => ({
         close: handleClose,
         prev: handlePrev,
         next: handleNext,
-        select: () => {
+        select() {
           const item = items[selectedIndex ?? -1] ?? null;
           if (!item) return;
           handleSelect(item);
         },
-      }),
+      };
-      [handleClose, handleNext, handlePrev, handleSelect, items, selectedIndex],
+    }, [handleClose, handleNext, handlePrev, handleSelect, items, selectedIndex]);
-    );
 
     const styles = useMemo<{
       container: CSSProperties;

src-web/hooks/useStateWithDeps.ts

@@ -9,6 +9,6 @@ export function useStateWithDeps<T>(defaultValue: T, deps: DependencyList) {
   useEffect(() => {
     setValue(defaultValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, [...deps]);
   return [value, setValue] as const;
 }