diff --git a/.changeset/brown-banks-play.md b/.changeset/brown-banks-play.md new file mode 100644 index 00000000..cd14c657 --- /dev/null +++ b/.changeset/brown-banks-play.md @@ -0,0 +1,5 @@ +--- +"@clack/prompts": patch +--- + +Fix placeholder rendering when using autocomplete. diff --git a/packages/prompts/src/autocomplete.ts b/packages/prompts/src/autocomplete.ts index 89f5b704..666d9d83 100644 --- a/packages/prompts/src/autocomplete.ts +++ b/packages/prompts/src/autocomplete.ts @@ -91,10 +91,9 @@ export const autocomplete = (opts: AutocompleteOptions) => { // Title and message display const headings = [`${color.gray(S_BAR)}`, `${symbol(this.state)} ${opts.message}`]; const userInput = this.userInput; - const valueAsString = String(this.value ?? ''); const options = this.options; const placeholder = opts.placeholder; - const showPlaceholder = valueAsString === '' && placeholder !== undefined; + const showPlaceholder = userInput === '' && placeholder !== undefined; // Handle different states switch (this.state) { diff --git a/packages/prompts/test/__snapshots__/autocomplete.test.ts.snap b/packages/prompts/test/__snapshots__/autocomplete.test.ts.snap index 4f299d9f..05961ea5 100644 --- a/packages/prompts/test/__snapshots__/autocomplete.test.ts.snap +++ b/packages/prompts/test/__snapshots__/autocomplete.test.ts.snap @@ -46,6 +46,39 @@ exports[`autocomplete > limits displayed options when maxItems is set 1`] = ` ] `; +exports[`autocomplete > placeholder is shown if set 1`] = ` +[ + "", + "│ +◆ Select a fruit +│ +│ Search: Type to search... +│ ● Apple +│ ○ Banana +│ ○ Cherry +│ ○ Grape +│ ○ Orange +│ ↑/↓ to select • Enter: confirm • Type: to search +└", + "", + "", + "", + "│ Search: g█ (2 matches) +│ ● Grape +│ ○ Orange +│ ↑/↓ to select • Enter: confirm • Type: to search +└", + "", + "", + "", + "◇ Select a fruit +│ Grape", + " +", + "", +] +`; + exports[`autocomplete > renders bottom ellipsis when items do not fit 1`] = ` [ "", diff --git a/packages/prompts/test/autocomplete.test.ts b/packages/prompts/test/autocomplete.test.ts index dcd27891..ca8167f5 100644 --- a/packages/prompts/test/autocomplete.test.ts +++ b/packages/prompts/test/autocomplete.test.ts @@ -225,6 +225,22 @@ describe('autocomplete', () => { await result; expect(output.buffer).toMatchSnapshot(); }); + + test('placeholder is shown if set', async () => { + const result = autocomplete({ + message: 'Select a fruit', + placeholder: 'Type to search...', + options: testOptions, + input, + output, + }); + + input.emit('keypress', 'g', { name: 'g' }); + input.emit('keypress', '', { name: 'return' }); + const value = await result; + expect(output.buffer).toMatchSnapshot(); + expect(value).toBe('grape'); + }); }); describe('autocompleteMultiselect', () => {