Environment
- OS: Linux
- Node Version: Bun 1.3.5
- Package:
@clack/prompts
- Package Version: 1.0.0-alpha.9
Describe the bug
When using autocomplete with a placeholder prop, the user's typed input is not displayed in the search field. The placeholder text remains visible even while typing, although filtering works correctly.
Note: This bug only occurs when placeholder is provided. Without it, typing displays correctly.
To Reproduce
import { autocomplete } from "@clack/prompts";
const result = await autocomplete({
message: "Pick a theme",
options: [
{ value: "dracula", label: "dracula" },
{ value: "nord", label: "nord" },
{ value: "tokyo-night", label: "tokyo-night" },
],
placeholder: "Type to filter...", // Bug only occurs with this prop
});
Steps to reproduce:
- Run the above code
- Start typing (e.g., "dra")
- Observe that filtering works (options reduce) but input text is not shown
- Remove the
placeholder prop and repeat - typing now displays correctly
Expected behavior
When typing to filter options, the search input should display the typed characters (e.g., Search: dra█ when typing "dra").
Additional Information
In packages/prompts/src/autocomplete.ts (line 89-90):
const valueAsString = String(this.value ?? '');
const showPlaceholder = valueAsString === '' && placeholder !== undefined;
The issue is that showPlaceholder checks valueAsString (the selected value) instead of userInput. When no item is selected yet and placeholder is defined, showPlaceholder stays true even while the user is typing.
Note: autocompleteMultiselect already handles this correctly (line 230-231):
const userInput = this.userInput;
const showPlaceholder = userInput === '' && placeholder !== undefined;
Suggested fix for autocomplete:
- const valueAsString = String(this.value ?? '');
- const showPlaceholder = valueAsString === '' && placeholder !== undefined;
+ const showPlaceholder = userInput === '' && placeholder !== undefined;
The valueAsString variable can be removed if not used elsewhere in that scope.
Environment
@clack/promptsDescribe the bug
When using
autocompletewith aplaceholderprop, the user's typed input is not displayed in the search field. The placeholder text remains visible even while typing, although filtering works correctly.Note: This bug only occurs when
placeholderis provided. Without it, typing displays correctly.To Reproduce
Steps to reproduce:
placeholderprop and repeat - typing now displays correctlyExpected behavior
When typing to filter options, the search input should display the typed characters (e.g.,
Search: dra█when typing "dra").Additional Information
In
packages/prompts/src/autocomplete.ts(line 89-90):The issue is that
showPlaceholderchecksvalueAsString(the selected value) instead ofuserInput. When no item is selected yet andplaceholderis defined,showPlaceholderstaystrueeven while the user is typing.Note:
autocompleteMultiselectalready handles this correctly (line 230-231):Suggested fix for
autocomplete:The
valueAsStringvariable can be removed if not used elsewhere in that scope.