feat(plan): use placeholder for choice question "Other" option (#18101)

This commit is contained in:
Jerop Kipruto
2026-02-02 12:00:13 -05:00
committed by GitHub
parent 381669dce0
commit 9e7c10ad88
6 changed files with 108 additions and 3 deletions

View File

@@ -1008,4 +1008,71 @@ describe('AskUserDialog', () => {
// Should contain the full long question (or at least its parts)
expect(lastFrame()).toContain('This is a very long question');
});
describe('Choice question placeholder', () => {
it('uses placeholder for "Other" option when provided', async () => {
const questions: Question[] = [
{
question: 'Select your preferred language:',
header: 'Language',
options: [
{ label: 'TypeScript', description: '' },
{ label: 'JavaScript', description: '' },
],
placeholder: 'Type another language...',
multiSelect: false,
},
];
const { stdin, lastFrame } = renderWithProviders(
<AskUserDialog
questions={questions}
onSubmit={vi.fn()}
onCancel={vi.fn()}
width={80}
/>,
{ width: 80 },
);
// Navigate to the "Other" option
writeKey(stdin, '\x1b[B'); // Down
writeKey(stdin, '\x1b[B'); // Down to Other
await waitFor(() => {
expect(lastFrame()).toMatchSnapshot();
});
});
it('uses default placeholder when not provided', async () => {
const questions: Question[] = [
{
question: 'Select your preferred language:',
header: 'Language',
options: [
{ label: 'TypeScript', description: '' },
{ label: 'JavaScript', description: '' },
],
multiSelect: false,
},
];
const { stdin, lastFrame } = renderWithProviders(
<AskUserDialog
questions={questions}
onSubmit={vi.fn()}
onCancel={vi.fn()}
width={80}
/>,
{ width: 80 },
);
// Navigate to the "Other" option
writeKey(stdin, '\x1b[B'); // Down
writeKey(stdin, '\x1b[B'); // Down to Other
await waitFor(() => {
expect(lastFrame()).toMatchSnapshot();
});
});
});
});

View File

@@ -780,7 +780,7 @@ const ChoiceQuestionView: React.FC<ChoiceQuestionViewProps> = ({
// Render inline text input for custom option
if (optionItem.type === 'other') {
const placeholder = 'Enter a custom value';
const placeholder = question.placeholder || 'Enter a custom value';
return (
<Box flexDirection="row">
{showCheck && (

View File

@@ -1,5 +1,25 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`AskUserDialog > Choice question placeholder > uses default placeholder when not provided 1`] = `
"Select your preferred language:
1. TypeScript
2. JavaScript
● 3. Enter a custom value
Enter to submit · Esc to cancel"
`;
exports[`AskUserDialog > Choice question placeholder > uses placeholder for "Other" option when provided 1`] = `
"Select your preferred language:
1. TypeScript
2. JavaScript
● 3. Type another language...
Enter to submit · Esc to cancel"
`;
exports[`AskUserDialog > Scroll Arrows (useAlternateBuffer: false) > shows scroll arrows correctly when useAlternateBuffer is false 1`] = `
"Choose an option