Allow users to cancel out of theme selector (#310)

1 files changed, 8 insertions, 0 deletions

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 = '';