fix(autocomplete): display placeholder only when user input is empty (#442)

Author: 43081j

.changeset/brown-banks-play.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Fix placeholder rendering when using autocomplete.

packages/prompts/src/autocomplete.ts

@@ -98,10 +98,9 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
 			// 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) {

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`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+│
+│  Search: Type to search...
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: g█ (2 matches)
+│  ● Grape
+│  ○ Orange
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=7>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  Grape",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`autocomplete > renders bottom ellipsis when items do not fit 1`] = `
 [
   "<cursor.hide>",

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', () => {