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;
 };