diff --git a/.changeset/violet-hornets-turn.md b/.changeset/violet-hornets-turn.md new file mode 100644 index 00000000..f3ef7cf9 --- /dev/null +++ b/.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. diff --git a/packages/prompts/src/autocomplete.ts b/packages/prompts/src/autocomplete.ts index a2041b2d..5cd79caa 100644 --- a/packages/prompts/src/autocomplete.ts +++ b/packages/prompts/src/autocomplete.ts @@ -275,7 +275,7 @@ export const autocompleteMultiselect = (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 = (opts: AutocompleteMultiSelectOpti }); // Return the result or cancel symbol - return prompt.prompt() as Promise; + return prompt.prompt() as Promise; }; diff --git a/packages/prompts/test/__snapshots__/autocomplete.test.ts.snap b/packages/prompts/test/__snapshots__/autocomplete.test.ts.snap index 1e0daf65..830ea799 100644 --- a/packages/prompts/test/__snapshots__/autocomplete.test.ts.snap +++ b/packages/prompts/test/__snapshots__/autocomplete.test.ts.snap @@ -298,7 +298,7 @@ exports[`autocompleteMultiselect > can be aborted by a signal 1`] = ` │ ◻ Cherry │ ◻ Grape │ ◻ Orange -│ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search +│ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search └", " ", @@ -306,6 +306,61 @@ exports[`autocompleteMultiselect > can be aborted by a signal 1`] = ` ] `; +exports[`autocompleteMultiselect > can use navigation keys to select options 1`] = ` +[ + "", + "│ +◆ Select fruits + +│ Search: _ +│ ◻ Apple +│ ◻ Banana +│ ◻ Cherry +│ ◻ Grape +│ ◻ Orange +│ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search +└", + "", + "", + "", + "│ Search:  +│ ◻ Apple +│ ◻ Banana +│ ◻ Cherry +│ ◻ Grape +│ ◻ Orange +│ ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search +└", + "", + "", + "", + "│ ◼ Banana", + "", + "", + "", + "", + "│ ◼ Banana +│ ◻ Cherry +│ ◻ Grape +│ ◻ Orange +│ ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search +└", + "", + "", + "", + "│ ◼ Cherry", + "", + "", + "", + "", + "◇ Select fruits +│ 2 items selected", + " +", + "", +] +`; + exports[`autocompleteMultiselect > renders error when empty selection & required is true 1`] = ` [ "", @@ -318,7 +373,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required │ ◻ Cherry │ ◻ Grape │ ◻ Orange -│ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search +│ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search └", "", "", @@ -332,7 +387,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required │ ◻ Cherry │ ◻ Grape │ ◻ Orange -│ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search +│ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search └", "", "", @@ -345,7 +400,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required │ ◻ Cherry │ ◻ Grape │ ◻ Orange -│ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search +│ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search └", "", "", diff --git a/packages/prompts/test/autocomplete.test.ts b/packages/prompts/test/autocomplete.test.ts index 2e6f7b6c..eb14abb4 100644 --- a/packages/prompts/test/autocomplete.test.ts +++ b/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(); + }); });