+5

.changeset/violet-hornets-turn.md

Reviewed

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

+2 -2

packages/prompts/src/autocomplete.ts

Reviewed

··· 275 275 // Instructions 276 276 const instructions = [ 277 277 `${color.dim('↑/↓')} to navigate`, 278 278 - `${color.dim('Space:')} select`, 278 278 + `${color.dim(this.isNavigating ? 'Space/Tab:' : 'Tab:')} select`, 279 279 `${color.dim('Enter:')} confirm`, 280 280 `${color.dim('Type:')} to search`, 281 281 ]; ··· 315 315 }); 316 316 317 317 // Return the result or cancel symbol 318 318 - return prompt.prompt() as Promise<Value | symbol>; 318 318 + return prompt.prompt() as Promise<Value[] | symbol>; 319 319 };

+59 -4

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

Reviewed

··· 298 298 │ ◻ Cherry 299 299 │ ◻ Grape 300 300 │ ◻ Orange 301 301 - │ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search 301 301 + │ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search 302 302 + └", 303 303 + " 304 304 + ", 305 305 + "<cursor.show>", 306 306 + ] 307 307 + `; 308 308 + 309 309 + exports[`autocompleteMultiselect > can use navigation keys to select options 1`] = ` 310 310 + [ 311 311 + "<cursor.hide>", 312 312 + "│ 313 313 + ◆ Select fruits 314 314 + 315 315 + │ Search: _ 316 316 + │ ◻ Apple 317 317 + │ ◻ Banana 318 318 + │ ◻ Cherry 319 319 + │ ◻ Grape 320 320 + │ ◻ Orange 321 321 + │ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search 322 322 + └", 323 323 + "<cursor.backward count=999><cursor.up count=10>", 324 324 + "<cursor.down count=3>", 325 325 + "<erase.down>", 326 326 + "│ Search:  327 327 + │ ◻ Apple 328 328 + │ ◻ Banana 329 329 + │ ◻ Cherry 330 330 + │ ◻ Grape 331 331 + │ ◻ Orange 332 332 + │ ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search 302 333 └", 334 334 + "<cursor.backward count=999><cursor.up count=10>", 335 335 + "<cursor.down count=5>", 336 336 + "<erase.line><cursor.left count=1>", 337 337 + "│ ◼ Banana", 338 338 + "<cursor.down count=5>", 339 339 + "<cursor.backward count=999><cursor.up count=10>", 340 340 + "<cursor.down count=5>", 341 341 + "<erase.down>", 342 342 + "│ ◼ Banana 343 343 + │ ◻ Cherry 344 344 + │ ◻ Grape 345 345 + │ ◻ Orange 346 346 + │ ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search 347 347 + └", 348 348 + "<cursor.backward count=999><cursor.up count=10>", 349 349 + "<cursor.down count=6>", 350 350 + "<erase.line><cursor.left count=1>", 351 351 + "│ ◼ Cherry", 352 352 + "<cursor.down count=4>", 353 353 + "<cursor.backward count=999><cursor.up count=10>", 354 354 + "<cursor.down count=1>", 355 355 + "<erase.down>", 356 356 + "◇ Select fruits 357 357 + │ 2 items selected", 303 358 " 304 359 ", 305 360 "<cursor.show>", ··· 318 373 │ ◻ Cherry 319 374 │ ◻ Grape 320 375 │ ◻ Orange 321 321 - │ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search 376 376 + │ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search 322 377 └", 323 378 "<cursor.backward count=999><cursor.up count=10>", 324 379 "<cursor.down count=1>", ··· 332 387 │ ◻ Cherry 333 388 │ ◻ Grape 334 389 │ ◻ Orange 335 335 - │ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search 390 390 + │ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search 336 391 └", 337 392 "<cursor.backward count=999><cursor.up count=11>", 338 393 "<cursor.down count=1>", ··· 345 400 │ ◻ Cherry 346 401 │ ◻ Grape 347 402 │ ◻ Orange 348 348 - │ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search 403 403 + │ ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search 349 404 └", 350 405 "<cursor.backward count=999><cursor.up count=10>", 351 406 "<cursor.down count=1>",

+19

packages/prompts/test/autocomplete.test.ts

Reviewed

··· 221 221 expect(isCancel(value)).toBe(true); 222 222 expect(output.buffer).toMatchSnapshot(); 223 223 }); 224 224 + 225 225 + test('can use navigation keys to select options', async () => { 226 226 + const result = autocompleteMultiselect({ 227 227 + message: 'Select fruits', 228 228 + options: testOptions, 229 229 + input, 230 230 + output, 231 231 + }); 232 232 + 233 233 + input.emit('keypress', '', { name: 'down' }); 234 234 + input.emit('keypress', '', { name: 'space' }); 235 235 + input.emit('keypress', '', { name: 'down' }); 236 236 + input.emit('keypress', '', { name: 'space' }); 237 237 + input.emit('keypress', '', { name: 'return' }); 238 238 + 239 239 + const value = await result; 240 240 + expect(value).toEqual(['banana', 'cherry']); 241 241 + expect(output.buffer).toMatchSnapshot(); 242 242 + }); 224 243 });