From 6719573b2ba444a7dc8893691d454f79ef5290c1 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 13 Jan 2025 12:28:31 -0800
Subject: [PATCH] Preserve dropdown trigger button background when menu is open

---
 src-web/components/core/Button.tsx   |  2 +-
 src-web/components/core/Dropdown.tsx | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src-web/components/core/Button.tsx b/src-web/components/core/Button.tsx
index 1360c659..ffb79982 100644
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -56,7 +56,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   ref,
 ) {
   const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join('');
-  const fullTitle = hotkeyTrigger ? `${title}  ${hotkeyTrigger}` : title;
+  const fullTitle = hotkeyTrigger ? `${title ?? ''} ${hotkeyTrigger}`.trim() : title;
 
   const classes = classNames(
     className,
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index 1ffec4a2..558cdcf9 100644
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
+import { atom, useAtom } from 'jotai';
 import type {
   CSSProperties,
   FocusEvent as ReactFocusEvent,
@@ -26,7 +27,7 @@ import { useClickOutside } from '../../hooks/useClickOutside';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useHotKey } from '../../hooks/useHotKey';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
-import {generateId} from "../../lib/generateId";
+import { generateId } from '../../lib/generateId';
 import { getNodeText } from '../../lib/getNodeText';
 import { Overlay } from '../Overlay';
 import { Button } from './Button';
@@ -34,7 +35,6 @@ import { HotKey } from './HotKey';
 import { Icon } from './Icon';
 import { Separator } from './Separator';
 import { HStack, VStack } from './Stacks';
-import { atom, useAtom } from 'jotai';
 
 export type DropdownItemSeparator = {
   type: 'separator';
@@ -102,8 +102,19 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
         const prevIsOpen = prevId === id;
         const newIsOpen = typeof o === 'function' ? o(prevIsOpen) : o;
 
-        if (newIsOpen) onOpen?.();
-        else onClose?.();
+        if (newIsOpen) {
+          onOpen?.();
+
+          // Persist background color of button until we close the dropdown
+          buttonRef.current!.style.backgroundColor = window
+            .getComputedStyle(buttonRef.current!)
+            .getPropertyValue('background-color');
+        } else {
+          onClose?.();
+
+          // Reset background color of button
+          buttonRef.current!.style.backgroundColor = '';
+        }
 
         // 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