+6

.changeset/bright-hornets-destroy.md

Reviewed

··· 1 1 + --- 2 2 + "@clack/prompts": patch 3 3 + "@clack/core": patch 4 4 + --- 5 5 + 6 6 + Prevents placeholder from being used as input value in text prompts

+32

examples/basic/default-value.ts

Reviewed

··· 1 1 + import * as p from '@clack/prompts'; 2 2 + import color from 'picocolors'; 3 3 + 4 4 + async function main() { 5 5 + const defaultPath = 'my-project'; 6 6 + 7 7 + const result = await p.text( 8 8 + { 9 9 + message: 'Enter the directory to bootstrap the project', 10 10 + placeholder: ` (hit Enter to use '${defaultPath}')`, 11 11 + defaultValue: defaultPath, 12 12 + validate: (value) => { 13 13 + if (!value) { 14 14 + return 'Directory is required'; 15 15 + } 16 16 + if (value.includes(' ')) { 17 17 + return 'Directory cannot contain spaces'; 18 18 + } 19 19 + return undefined; 20 20 + }, 21 21 + } 22 22 + ); 23 23 + 24 24 + if (p.isCancel(result)) { 25 25 + p.cancel('Operation cancelled.'); 26 26 + process.exit(0); 27 27 + } 28 28 + 29 29 + p.outro(`Let's bootstrap the project in ${color.cyan(result)}`); 30 30 + } 31 31 + 32 32 + main().catch(console.error);

+7 -3

packages/core/src/prompts/prompt.ts

Reviewed

··· 14 14 render(this: Omit<Self, 'prompt'>): string | undefined; 15 15 placeholder?: string; 16 16 initialValue?: any; 17 17 + defaultValue?: any; 17 18 validate?: ((value: any) => string | Error | undefined) | undefined; 18 19 input?: Readable; 19 20 output?: Writable; ··· 222 223 this.emit('key', char?.toLowerCase(), key); 223 224 224 225 if (key?.name === 'return') { 225 225 - if (!this.value && this.opts.placeholder) { 226 226 - this.rl?.write(this.opts.placeholder); 227 227 - this._setValue(this.opts.placeholder); 226 226 + if (!this.value) { 227 227 + if (this.opts.defaultValue) { 228 228 + this._setValue(this.opts.defaultValue); 229 229 + } else { 230 230 + this._setValue(''); 231 231 + } 228 232 } 229 233 230 234 if (this.opts.validate) {

+3

packages/core/src/prompts/text.ts

Reviewed

··· 29 29 if (!this.value) { 30 30 this.value = opts.defaultValue; 31 31 } 32 32 + if (this.value === undefined) { 33 33 + this.value = ''; 34 34 + } 32 35 }); 33 36 } 34 37 }

+1 -1

packages/core/test/prompts/prompt.test.ts

Reviewed

··· 38 38 const resultPromise = instance.prompt(); 39 39 input.emit('keypress', '', { name: 'return' }); 40 40 const result = await resultPromise; 41 41 - expect(result).to.equal(undefined); 41 41 + expect(result).to.equal(''); 42 42 expect(isCancel(result)).to.equal(false); 43 43 expect(instance.state).to.equal('submit'); 44 44 expect(output.buffer).to.deep.equal([cursor.hide, 'foo', '\n', cursor.show]);

+27

packages/core/test/prompts/text.test.ts

Reviewed

··· 110 110 input.emit('keypress', 'right', { name: 'right' }); 111 111 expect(instance.valueWithCursor).to.equal('foo█'); 112 112 }); 113 113 + 114 114 + test('does not use placeholder as value when pressing enter', async () => { 115 115 + const instance = new TextPrompt({ 116 116 + input, 117 117 + output, 118 118 + render: () => 'foo', 119 119 + placeholder: ' (hit Enter to use default)', 120 120 + defaultValue: 'default-value' 121 121 + }); 122 122 + const resultPromise = instance.prompt(); 123 123 + input.emit('keypress', '', { name: 'return' }); 124 124 + const result = await resultPromise; 125 125 + expect(result).to.equal('default-value'); 126 126 + }); 127 127 + 128 128 + test('returns empty string when no value and no default', async () => { 129 129 + const instance = new TextPrompt({ 130 130 + input, 131 131 + output, 132 132 + render: () => 'foo', 133 133 + placeholder: ' (hit Enter to use default)' 134 134 + }); 135 135 + const resultPromise = instance.prompt(); 136 136 + input.emit('keypress', '', { name: 'return' }); 137 137 + const result = await resultPromise; 138 138 + expect(result).to.equal(''); 139 139 + }); 113 140 }); 114 141 });

+4 -2

packages/prompts/src/text.ts

Reviewed

··· 30 30 return `${title.trim()}\n${color.yellow(S_BAR)} ${value}\n${color.yellow( 31 31 S_BAR_END 32 32 )} ${color.yellow(this.error)}\n`; 33 33 - case 'submit': 34 34 - return `${title}${color.gray(S_BAR)} ${color.dim(this.value || opts.placeholder)}`; 33 33 + case 'submit': { 34 34 + const displayValue = typeof this.value === 'undefined' ? '' : this.value; 35 35 + return `${title}${color.gray(S_BAR)} ${color.dim(displayValue)}`; 36 36 + } 35 37 case 'cancel': 36 38 return `${title}${color.gray(S_BAR)} ${color.strikethrough( 37 39 color.dim(this.value ?? '')

+48 -32

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

Reviewed

··· 143 143 144 144 exports[`text (isCI = false) > validation errors render and clear (using Error) 1`] = ` 145 145 [ 146 146 - "<cursor.hide>", 146 146 + "<cursor.backward count=999>", 147 147 + "", 148 148 + "<erase.down>", 147 149 "│ 148 148 - ◆ foo 149 149 - │ /tmp/foo 150 150 - └ 150 150 + ▲ foo 151 151 + │ /tmp/foo 152 152 + └ should be /tmp/bar 151 153 ", 152 154 "<cursor.backward count=999><cursor.up count=4>", 153 153 - "<cursor.down count=2>", 154 154 - "<erase.line><cursor.left count=1>", 155 155 - "│ /tmp/b ", 156 156 - "<cursor.down count=2>", 155 155 + "<cursor.down count=1>", 156 156 + "<erase.down>", 157 157 + "◆ foo 158 158 + │ /tmp/b  159 159 + └ 160 160 + ", 157 161 "<cursor.backward count=999><cursor.up count=4>", 158 162 "<cursor.down count=1>", 159 163 "<erase.down>", ··· 186 190 187 191 exports[`text (isCI = false) > validation errors render and clear 1`] = ` 188 192 [ 189 189 - "<cursor.hide>", 193 193 + "<cursor.backward count=999>", 194 194 + "", 195 195 + "<erase.down>", 190 196 "│ 191 191 - ◆ foo 192 192 - │ /tmp/foo 193 193 - └ 197 197 + ▲ foo 198 198 + │ /tmp/foo 199 199 + └ should be /tmp/bar 194 200 ", 195 201 "<cursor.backward count=999><cursor.up count=4>", 196 196 - "<cursor.down count=2>", 197 197 - "<erase.line><cursor.left count=1>", 198 198 - "│ /tmp/b ", 199 199 - "<cursor.down count=2>", 202 202 + "<cursor.down count=1>", 203 203 + "<erase.down>", 204 204 + "◆ foo 205 205 + │ /tmp/b  206 206 + └ 207 207 + ", 200 208 "<cursor.backward count=999><cursor.up count=4>", 201 209 "<cursor.down count=1>", 202 210 "<erase.down>", ··· 370 378 371 379 exports[`text (isCI = true) > validation errors render and clear (using Error) 1`] = ` 372 380 [ 373 373 - "<cursor.hide>", 381 381 + "<cursor.backward count=999>", 382 382 + "", 383 383 + "<erase.down>", 374 384 "│ 375 375 - ◆ foo 376 376 - │ /tmp/foo 377 377 - └ 385 385 + ▲ foo 386 386 + │ /tmp/foo 387 387 + └ should be /tmp/bar 378 388 ", 379 389 "<cursor.backward count=999><cursor.up count=4>", 380 380 - "<cursor.down count=2>", 381 381 - "<erase.line><cursor.left count=1>", 382 382 - "│ /tmp/b ", 383 383 - "<cursor.down count=2>", 390 390 + "<cursor.down count=1>", 391 391 + "<erase.down>", 392 392 + "◆ foo 393 393 + │ /tmp/b  394 394 + └ 395 395 + ", 384 396 "<cursor.backward count=999><cursor.up count=4>", 385 397 "<cursor.down count=1>", 386 398 "<erase.down>", ··· 413 425 414 426 exports[`text (isCI = true) > validation errors render and clear 1`] = ` 415 427 [ 416 416 - "<cursor.hide>", 428 428 + "<cursor.backward count=999>", 429 429 + "", 430 430 + "<erase.down>", 417 431 "│ 418 418 - ◆ foo 419 419 - │ /tmp/foo 420 420 - └ 432 432 + ▲ foo 433 433 + │ /tmp/foo 434 434 + └ should be /tmp/bar 421 435 ", 422 436 "<cursor.backward count=999><cursor.up count=4>", 423 423 - "<cursor.down count=2>", 424 424 - "<erase.line><cursor.left count=1>", 425 425 - "│ /tmp/b ", 426 426 - "<cursor.down count=2>", 437 437 + "<cursor.down count=1>", 438 438 + "<erase.down>", 439 439 + "◆ foo 440 440 + │ /tmp/b  441 441 + └ 442 442 + ", 427 443 "<cursor.backward count=999><cursor.up count=4>", 428 444 "<cursor.down count=1>", 429 445 "<erase.down>",

+48 -32

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

Reviewed

··· 142 142 143 143 exports[`text (isCI = false) > validation errors render and clear (using Error) 1`] = ` 144 144 [ 145 145 - "<cursor.hide>", 145 145 + "<cursor.backward count=999>", 146 146 + "", 147 147 + "<erase.down>", 146 148 "│ 147 147 - ◆ foo 148 148 - │ xyz 149 149 - └ 149 149 + ▲ foo 150 150 + │ xyz 151 151 + └ should be xy 150 152 ", 151 153 "<cursor.backward count=999><cursor.up count=4>", 152 152 - "<cursor.down count=2>", 153 153 - "<erase.line><cursor.left count=1>", 154 154 - "│ xyz", 155 155 - "<cursor.down count=2>", 154 154 + "<cursor.down count=1>", 155 155 + "<erase.down>", 156 156 + "◆ foo 157 157 + │ xyz 158 158 + └ 159 159 + ", 156 160 "<cursor.backward count=999><cursor.up count=4>", 157 161 "<cursor.down count=1>", 158 162 "<erase.down>", ··· 180 184 181 185 exports[`text (isCI = false) > validation errors render and clear 1`] = ` 182 186 [ 183 183 - "<cursor.hide>", 187 187 + "<cursor.backward count=999>", 188 188 + "", 189 189 + "<erase.down>", 184 190 "│ 185 185 - ◆ foo 186 186 - │ xyz 187 187 - └ 191 191 + ▲ foo 192 192 + │ xyz 193 193 + └ should be xy 188 194 ", 189 195 "<cursor.backward count=999><cursor.up count=4>", 190 190 - "<cursor.down count=2>", 191 191 - "<erase.line><cursor.left count=1>", 192 192 - "│ xyz", 193 193 - "<cursor.down count=2>", 196 196 + "<cursor.down count=1>", 197 197 + "<erase.down>", 198 198 + "◆ foo 199 199 + │ xyz 200 200 + └ 201 201 + ", 194 202 "<cursor.backward count=999><cursor.up count=4>", 195 203 "<cursor.down count=1>", 196 204 "<erase.down>", ··· 358 366 359 367 exports[`text (isCI = true) > validation errors render and clear (using Error) 1`] = ` 360 368 [ 361 361 - "<cursor.hide>", 369 369 + "<cursor.backward count=999>", 370 370 + "", 371 371 + "<erase.down>", 362 372 "│ 363 363 - ◆ foo 364 364 - │ xyz 365 365 - └ 373 373 + ▲ foo 374 374 + │ xyz 375 375 + └ should be xy 366 376 ", 367 377 "<cursor.backward count=999><cursor.up count=4>", 368 368 - "<cursor.down count=2>", 369 369 - "<erase.line><cursor.left count=1>", 370 370 - "│ xyz", 371 371 - "<cursor.down count=2>", 378 378 + "<cursor.down count=1>", 379 379 + "<erase.down>", 380 380 + "◆ foo 381 381 + │ xyz 382 382 + └ 383 383 + ", 372 384 "<cursor.backward count=999><cursor.up count=4>", 373 385 "<cursor.down count=1>", 374 386 "<erase.down>", ··· 396 408 397 409 exports[`text (isCI = true) > validation errors render and clear 1`] = ` 398 410 [ 399 399 - "<cursor.hide>", 411 411 + "<cursor.backward count=999>", 412 412 + "", 413 413 + "<erase.down>", 400 414 "│ 401 401 - ◆ foo 402 402 - │ xyz 403 403 - └ 415 415 + ▲ foo 416 416 + │ xyz 417 417 + └ should be xy 404 418 ", 405 419 "<cursor.backward count=999><cursor.up count=4>", 406 406 - "<cursor.down count=2>", 407 407 - "<erase.line><cursor.left count=1>", 408 408 - "│ xyz", 409 409 - "<cursor.down count=2>", 420 420 + "<cursor.down count=1>", 421 421 + "<erase.down>", 422 422 + "◆ foo 423 423 + │ xyz 424 424 + └ 425 425 + ", 410 426 "<cursor.backward count=999><cursor.up count=4>", 411 427 "<cursor.down count=1>", 412 428 "<erase.down>",

+80 -4

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

Reviewed

··· 38 38 ] 39 39 `; 40 40 41 41 + exports[`text (isCI = false) > empty string when no value and no default 1`] = ` 42 42 + [ 43 43 + "<cursor.hide>", 44 44 + "│ 45 45 + ◆ foo 46 46 + │   (hit Enter to use default) 47 47 + └ 48 48 + ", 49 49 + "<cursor.backward count=999><cursor.up count=4>", 50 50 + "<cursor.down count=1>", 51 51 + "<erase.down>", 52 52 + "◇ foo 53 53 + │", 54 54 + " 55 55 + ", 56 56 + "<cursor.show>", 57 57 + ] 58 58 + `; 59 59 + 60 60 + exports[`text (isCI = false) > placeholder is not used as value when pressing enter 1`] = ` 61 61 + [ 62 62 + "<cursor.hide>", 63 63 + "│ 64 64 + ◆ foo 65 65 + │   (hit Enter to use default) 66 66 + └ 67 67 + ", 68 68 + "<cursor.backward count=999><cursor.up count=4>", 69 69 + "<cursor.down count=1>", 70 70 + "<erase.down>", 71 71 + "◇ foo 72 72 + │ default-value", 73 73 + " 74 74 + ", 75 75 + "<cursor.show>", 76 76 + ] 77 77 + `; 78 78 + 41 79 exports[`text (isCI = false) > renders cancelled value if one set 1`] = ` 42 80 [ 43 81 "<cursor.hide>", ··· 80 118 "<cursor.down count=1>", 81 119 "<erase.down>", 82 120 "◇ foo 83 83 - │ undefined", 121 121 + │", 84 122 " 85 123 ", 86 124 "<cursor.show>", ··· 99 137 "<cursor.down count=1>", 100 138 "<erase.down>", 101 139 "◇ foo 102 102 - │ bar", 140 140 + │", 103 141 " 104 142 ", 105 143 "<cursor.show>", ··· 249 287 ] 250 288 `; 251 289 290 290 + exports[`text (isCI = true) > empty string when no value and no default 1`] = ` 291 291 + [ 292 292 + "<cursor.hide>", 293 293 + "│ 294 294 + ◆ foo 295 295 + │   (hit Enter to use default) 296 296 + └ 297 297 + ", 298 298 + "<cursor.backward count=999><cursor.up count=4>", 299 299 + "<cursor.down count=1>", 300 300 + "<erase.down>", 301 301 + "◇ foo 302 302 + │", 303 303 + " 304 304 + ", 305 305 + "<cursor.show>", 306 306 + ] 307 307 + `; 308 308 + 309 309 + exports[`text (isCI = true) > placeholder is not used as value when pressing enter 1`] = ` 310 310 + [ 311 311 + "<cursor.hide>", 312 312 + "│ 313 313 + ◆ foo 314 314 + │   (hit Enter to use default) 315 315 + └ 316 316 + ", 317 317 + "<cursor.backward count=999><cursor.up count=4>", 318 318 + "<cursor.down count=1>", 319 319 + "<erase.down>", 320 320 + "◇ foo 321 321 + │ default-value", 322 322 + " 323 323 + ", 324 324 + "<cursor.show>", 325 325 + ] 326 326 + `; 327 327 + 252 328 exports[`text (isCI = true) > renders cancelled value if one set 1`] = ` 253 329 [ 254 330 "<cursor.hide>", ··· 291 367 "<cursor.down count=1>", 292 368 "<erase.down>", 293 369 "◇ foo 294 294 - │ undefined", 370 370 + │", 295 371 " 296 372 ", 297 373 "<cursor.show>", ··· 310 386 "<cursor.down count=1>", 311 387 "<erase.down>", 312 388 "◇ foo 313 313 - │ bar", 389 389 + │", 314 390 " 315 391 ", 316 392 "<cursor.show>",

+34 -2

packages/prompts/test/text.test.ts

Reviewed

··· 52 52 const value = await result; 53 53 54 54 expect(output.buffer).toMatchSnapshot(); 55 55 - 56 56 - expect(value).toBe('bar'); 55 55 + expect(value).toBe(''); 57 56 }); 58 57 59 58 test('<tab> applies placeholder', async () => { ··· 172 171 const value = await result; 173 172 174 173 expect(value).toBe('xy'); 174 174 + expect(output.buffer).toMatchSnapshot(); 175 175 + }); 176 176 + 177 177 + test('placeholder is not used as value when pressing enter', async () => { 178 178 + const result = prompts.text({ 179 179 + message: 'foo', 180 180 + placeholder: ' (hit Enter to use default)', 181 181 + defaultValue: 'default-value', 182 182 + input, 183 183 + output, 184 184 + }); 185 185 + 186 186 + input.emit('keypress', '', { name: 'return' }); 187 187 + 188 188 + const value = await result; 189 189 + 190 190 + expect(value).toBe('default-value'); 191 191 + expect(output.buffer).toMatchSnapshot(); 192 192 + }); 193 193 + 194 194 + test('empty string when no value and no default', async () => { 195 195 + const result = prompts.text({ 196 196 + message: 'foo', 197 197 + placeholder: ' (hit Enter to use default)', 198 198 + input, 199 199 + output, 200 200 + }); 201 201 + 202 202 + input.emit('keypress', '', { name: 'return' }); 203 203 + 204 204 + const value = await result; 205 205 + 206 206 + expect(value).toBe(''); 175 207 expect(output.buffer).toMatchSnapshot(); 176 208 }); 177 209 });