[READ-ONLY] Mirror of https://github.com/bombshell-dev/clack. Effortlessly build beautiful command-line apps
bomb.sh/docs/clack/basics/getting-started/
cli
command-line
command-line-app
node
prompt
prompts
fix(autocomplete): display placeholder only when user input is empty (#442)
authored by
James Garbutt
and committed by
GitHub
(Jan 25, 2026, 10:08 PM UTC)
55eb280e
c4feafb5
+55
-2
+5
.changeset/brown-banks-play.md
+5
.changeset/brown-banks-play.md
+1
-2
packages/prompts/src/autocomplete.ts
+1
-2
packages/prompts/src/autocomplete.ts
···
98
98
// Title and message display
99
99
const headings = [`${color.gray(S_BAR)}`, `${symbol(this.state)} ${opts.message}`];
100
100
const userInput = this.userInput;
101
-
const valueAsString = String(this.value ?? '');
102
101
const options = this.options;
103
102
const placeholder = opts.placeholder;
104
-
const showPlaceholder = valueAsString === '' && placeholder !== undefined;
103
+
const showPlaceholder = userInput === '' && placeholder !== undefined;
105
104
106
105
// Handle different states
107
106
switch (this.state) {
+33
packages/prompts/test/__snapshots__/autocomplete.test.ts.snap
+33
packages/prompts/test/__snapshots__/autocomplete.test.ts.snap
···
46
46
]
47
47
`;
48
48
49
+
exports[`autocomplete > placeholder is shown if set 1`] = `
50
+
[
51
+
"<cursor.hide>",
52
+
"[90m│[39m
53
+
[36m◆[39m Select a fruit
54
+
[36m│[39m
55
+
[36m│[39m [2mSearch:[22m [2mType to search...[22m
56
+
[36m│[39m [32m●[39m Apple
57
+
[36m│[39m [2m○[22m [2mBanana[22m
58
+
[36m│[39m [2m○[22m [2mCherry[22m
59
+
[36m│[39m [2m○[22m [2mGrape[22m
60
+
[36m│[39m [2m○[22m [2mOrange[22m
61
+
[36m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
62
+
[36m└[39m",
63
+
"<cursor.backward count=999><cursor.up count=10>",
64
+
"<cursor.down count=3>",
65
+
"<erase.down>",
66
+
"[36m│[39m [2mSearch:[22m g█[2m (2 matches)[22m
67
+
[36m│[39m [32m●[39m Grape
68
+
[36m│[39m [2m○[22m [2mOrange[22m
69
+
[36m│[39m [2m[2m↑/↓[22m[2m to select • [2mEnter:[22m[2m confirm • [2mType:[22m[2m to search[22m
70
+
[36m└[39m",
71
+
"<cursor.backward count=999><cursor.up count=7>",
72
+
"<cursor.down count=1>",
73
+
"<erase.down>",
74
+
"[32m◇[39m Select a fruit
75
+
[90m│[39m [2mGrape[22m",
76
+
"
77
+
",
78
+
"<cursor.show>",
79
+
]
80
+
`;
81
+
49
82
exports[`autocomplete > renders bottom ellipsis when items do not fit 1`] = `
50
83
[
51
84
"<cursor.hide>",
+16
packages/prompts/test/autocomplete.test.ts
+16
packages/prompts/test/autocomplete.test.ts
···
225
225
await result;
226
226
expect(output.buffer).toMatchSnapshot();
227
227
});
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
+
});
228
244
});
229
245
230
246
describe('autocompleteMultiselect', () => {