Skip to content

Commit 670bd92

Browse files
43081j43081j
committed
fix(autocomplete): display placeholder only when user input is empty
Fixes #439.
1 parent 5c65e38 commit 670bd92

4 files changed

Lines changed: 55 additions & 2 deletions

File tree

‎.changeset/brown-banks-play.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@clack/prompts": patch
3+
---
4+
5+
Fix placeholder rendering when using autocomplete.

‎packages/prompts/src/autocomplete.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,9 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
9191
// Title and message display
9292
const headings = [`${color.gray(S_BAR)}`, `${symbol(this.state)} ${opts.message}`];
9393
const userInput = this.userInput;
94-
const valueAsString = String(this.value ?? '');
9594
const options = this.options;
9695
const placeholder = opts.placeholder;
97-
const showPlaceholder = valueAsString === '' && placeholder !== undefined;
96+
const showPlaceholder = userInput === '' && placeholder !== undefined;
9897

9998
// Handle different states
10099
switch (this.state) {

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,39 @@ exports[`autocomplete > limits displayed options when maxItems is set 1`] = `
4646
]
4747
`;
4848
49+
exports[`autocomplete > placeholder is shown if set 1`] = `
50+
[
51+
"<cursor.hide>",
52+
"│
53+
◆ Select a fruit
54+
│
55+
│ Search: Type to search...
56+
│ ● Apple
57+
│ ○ Banana
58+
│ ○ Cherry
59+
│ ○ Grape
60+
│ ○ Orange
61+
│ ↑/↓ to select • Enter: confirm • Type: to search
62+
└",
63+
"<cursor.backward count=999><cursor.up count=10>",
64+
"<cursor.down count=3>",
65+
"<erase.down>",
66+
"│ Search: g█ (2 matches)
67+
│ ● Grape
68+
│ ○ Orange
69+
│ ↑/↓ to select • Enter: confirm • Type: to search
70+
└",
71+
"<cursor.backward count=999><cursor.up count=7>",
72+
"<cursor.down count=1>",
73+
"<erase.down>",
74+
"◇ Select a fruit
75+
│ Grape",
76+
"
77+
",
78+
"<cursor.show>",
79+
]
80+
`;
81+
4982
exports[`autocomplete > renders bottom ellipsis when items do not fit 1`] = `
5083
[
5184
"<cursor.hide>",

‎packages/prompts/test/autocomplete.test.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,22 @@ describe('autocomplete', () => {
225225
await result;
226226
expect(output.buffer).toMatchSnapshot();
227227
});
228+
229+
test('placeholder is shown if set', async () => {
230+
const result = autocomplete({
231+
message: 'Select a fruit',
232+
placeholder: 'Type to search...',
233+
options: testOptions,
234+
input,
235+
output,
236+
});
237+
238+
input.emit('keypress', 'g', { name: 'g' });
239+
input.emit('keypress', '', { name: 'return' });
240+
const value = await result;
241+
expect(output.buffer).toMatchSnapshot();
242+
expect(value).toBe('grape');
243+
});
228244
});
229245

230246
describe('autocompleteMultiselect', () => {

0 commit comments

Comments
 (0)