Bug Fixed: Not selecting second option as first arrow down

No execution action on enter key when no action is selected
Resestting active command after palette is closed

Author: rohitpotato

src/lib/components/CommandPalette.svelte

@@ -74,7 +74,7 @@
 			commands,
 			storeMethods,
 			actionMap,
-			activeCommandId: commands?.[0]?.actionId || '',
+			activeCommandId: null,
 			results: commands
 		}));
 	};
@@ -84,7 +84,7 @@
 	const unsubscribePaletteStore = paletteStore.subscribe((value: storeParams) => {
 		isPaletteVisible = value.isVisible;
 		actions = value.commands;
-		activeCommand = value.activeCommandId ?? actions?.[0]?.actionId;
+		activeCommand = value.activeCommandId ?? null;
 		searchResults = getNonEmptyArray(value.results, value.commands, []);
 	});
 
@@ -125,7 +125,7 @@
 		if (searchResults.length) {
 			// get currently seleted item
 			let activeCommandIndex = searchResults.findIndex((a) => a.actionId === activeCommand) ?? 0;
-			activeCommandIndex = activeCommandIndex === -1 ? 0 : activeCommandIndex;
+			activeCommandIndex = activeCommandIndex === -1 ? -1 : activeCommandIndex;
 			const totalCommands = searchResults.length;
 			const nextCommand = (activeCommandIndex + 1) % totalCommands;
 			const indexToSet = searchResults[nextCommand] ? nextCommand : activeCommandIndex;
@@ -136,7 +136,7 @@
 	const handleEnterKey = (event: KeyboardEvent) => {
 		event.preventDefault();
 		// get active command and execute
-		const action = actionMap[activeCommand];
+		const action = actionMap[activeCommand as string];
 		runAction({ action });
 	};
 

src/lib/components/ResultPanel.svelte

@@ -9,7 +9,8 @@
 
 	let actions: commands = [];
 	const unsubscribe = paletteStore.subscribe((value: storeParams) => {
-		actions = getNonEmptyArray(value.results);
+		actions =
+			value.results.length > 0 ? getNonEmptyArray(value.results) : getNonEmptyArray(value.commands);
 	});
 
 	const themeContext = getContext(THEME_CONTEXT) as Writable<themeContext>;

src/lib/types/index.d.ts

@@ -1,7 +1,7 @@
 import type createActionMap from '$lib/utils/createActionMap';
 import type createStoreMethods from '$lib/utils/createStoreMethods';
 
-export type ActionId = number | string;
+export type ActionId = number | string | null;
 export type onRunParams = {
 	action: action;
 	storeProps: storeParams;
@@ -22,7 +22,7 @@ export type commands = Array<action>;
 
 export interface storeParams {
 	isVisible: boolean;
-	textInput: '';
+	textInput: string;
 	commands: commands;
 	storeMethods: ReturnType<typeof createStoreMethods>;
 	actionMap: ReturnType<typeof createActionMap>;

src/lib/utils/createStoreMethods.ts

@@ -7,15 +7,14 @@ const createStoreMethods = () => {
 	const storeProps: storeParams = get(paletteStore);
 
 	const resetPaletteStore = () => {
-		paletteStore.update((n) => ({ ...n, defaultAppState }));
+		paletteStore.update((n) => ({ ...n, ...defaultAppState }));
 	};
 
 	const openPalette = () => {
 		paletteStore.update((n) => ({ ...n, isVisible: true }));
 	};
 
 	const closePalette = () => {
-		paletteStore.update((n) => ({ ...n, isVisible: false }));
 		resetPaletteStore();
 	};
 

src/lib/utils/index.ts

@@ -41,8 +41,8 @@ const updatePaletteStoreAfterActionExec = (actionId: ActionId) => {
 			...n,
 			isVisible: false,
 			textInput: '',
-			activeCommandId: actionId,
-			selectedCommandId: actionId,
+			activeCommandId: null,
+			selectedCommandId: null,
 			calledActions: [...n.calledActions, actionId]
 		};
 	});

src/routes/__layout.svelte

@@ -6,7 +6,7 @@
 <svelte:head>
 	<script>
 		const getThemeFromLocalStorage = () => {
-			const theme = localStorage.getItem('theme') || 'dark';
+			const theme = localStorage.getItem('theme') || 'light';
 			return theme;
 		};