fix(autocomplete): show correct selection text (#378)

Author: 43081j

.changeset/violet-hornets-turn.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Update key binding text to show tab/space when navigating, and tab otherwise.

packages/prompts/src/autocomplete.ts

@@ -275,7 +275,7 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 					// Instructions
 					const instructions = [
 						`${color.dim('↑/↓')} to navigate`,
-						`${color.dim('Space:')} select`,
+						`${color.dim(this.isNavigating ? 'Space/Tab:' : 'Tab:')} select`,
 						`${color.dim('Enter:')} confirm`,
 						`${color.dim('Type:')} to search`,
 					];
@@ -315,5 +315,5 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 	});
 
 	// Return the result or cancel symbol
-	return prompt.prompt() as Promise<Value | symbol>;
+	return prompt.prompt() as Promise<Value[] | symbol>;
 };

packages/prompts/test/__snapshots__/autocomplete.test.ts.snap

@@ -298,14 +298,69 @@ exports[`autocompleteMultiselect > can be aborted by a signal 1`] = `
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
+[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mTab:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
 └",
   "
 ",
   "<cursor.show>",
 ]
 `;
 
+exports[`autocompleteMultiselect > can use navigation keys to select options 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select fruits
+
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: 
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=5>",
+  "<erase.line><cursor.left count=1>",
+  "│  ◼ Banana",
+  "<cursor.down count=5>",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=5>",
+  "<erase.down>",
+  "│  ◼ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=6>",
+  "<erase.line><cursor.left count=1>",
+  "│  ◼ Cherry",
+  "<cursor.down count=4>",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select fruits
+│  2 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`autocompleteMultiselect > renders error when empty selection & required is true 1`] = `
 [
   "<cursor.hide>",
@@ -318,7 +373,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
+[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mTab:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
 └",
   "<cursor.backward count=999><cursor.up count=10>",
   "<cursor.down count=1>",
@@ -332,7 +387,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
+[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mTab:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
 └",
   "<cursor.backward count=999><cursor.up count=11>",
   "<cursor.down count=1>",
@@ -345,7 +400,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
 │  ◻ Cherry
 │  ◻ Grape
 │  ◻ Orange
-[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mSpace:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
+[36m│[39m  [2m[2m↑/↓[22m[2m to navigate • [2mTab:[22m[2m select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
 └",
   "<cursor.backward count=999><cursor.up count=10>",
   "<cursor.down count=1>",

packages/prompts/test/autocomplete.test.ts

@@ -221,4 +221,23 @@ describe('autocompleteMultiselect', () => {
 		expect(isCancel(value)).toBe(true);
 		expect(output.buffer).toMatchSnapshot();
 	});
+
+	test('can use navigation keys to select options', async () => {
+		const result = autocompleteMultiselect({
+			message: 'Select fruits',
+			options: testOptions,
+			input,
+			output,
+		});
+
+		input.emit('keypress', '', { name: 'down' });
+		input.emit('keypress', '', { name: 'space' });
+		input.emit('keypress', '', { name: 'down' });
+		input.emit('keypress', '', { name: 'space' });
+		input.emit('keypress', '', { name: 'return' });
+
+		const value = await result;
+		expect(value).toEqual(['banana', 'cherry']);
+		expect(output.buffer).toMatchSnapshot();
+	});
 });