From 61ccd4f33a17e05726537d74b6d5ba578d33cd78 Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguel.solorio07@gmail.com>
Date: Tue, 13 May 2025 07:41:32 -0700
Subject: Allow users to cancel out of theme selector (#310)

---
 packages/cli/src/ui/components/ThemeDialog.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'packages/cli/src/ui/components/ThemeDialog.tsx')

diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index 20686040..621ff847 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -21,12 +21,15 @@ interface ThemeDialogProps {
   onHighlight: (themeName: string | undefined) => void;
   /** The settings object */
   settings: LoadedSettings;
+  /** Callback to set the query */
+  setQuery: (query: string) => void;
 }
 
 export function ThemeDialog({
   onSelect,
   onHighlight,
   settings,
+  setQuery,
 }: ThemeDialogProps): React.JSX.Element {
   const [selectedScope, setSelectedScope] = useState<SettingScope>(
     SettingScope.User,
@@ -56,6 +59,7 @@ export function ThemeDialog({
   ];
 
   const handleThemeSelect = (themeName: string) => {
+    setQuery(''); // Clear the query when user selects a theme
     onSelect(themeName, selectedScope);
   };
 
@@ -77,6 +81,10 @@ export function ThemeDialog({
     if (key.tab) {
       setFocusedSection((prev) => (prev === 'theme' ? 'scope' : 'theme'));
     }
+    if (key.escape) {
+      setQuery(''); // Clear the query when user hits escape
+      onSelect(undefined, selectedScope);
+    }
   });
 
   let otherScopeModifiedMessage = '';
-- 
cgit v1.2.3

