diff --git a/.changeset/multiselect-keyboard-hint.md b/.changeset/multiselect-keyboard-hint.md new file mode 100644 index 00000000..7385e150 --- /dev/null +++ b/.changeset/multiselect-keyboard-hint.md @@ -0,0 +1,16 @@ +--- +'@tanstack/cli': patch +--- + +fix(cli): make add-on multiselect keyboard controls discoverable + +Users encountering the add-on multiselect prompt during `tanstack create` +often didn't realize the entries are checkboxes (toggle with Space) and +that the selection must be confirmed with Enter. The existing keyboard +shortcuts note was only shown once per session and could appear before +single-select prompts where it didn't apply. Now: + +- The "Keyboard Shortcuts" note is shown immediately above every + multiselect prompt and is no longer shown before single-select prompts. +- The multiselect message itself includes an inline `(Space to toggle, + Enter to confirm)` hint so the cue is inseparable from the prompt. diff --git a/packages/cli/src/ui-prompts.ts b/packages/cli/src/ui-prompts.ts index b559aa4c..65504ad3 100644 --- a/packages/cli/src/ui-prompts.ts +++ b/packages/cli/src/ui-prompts.ts @@ -133,9 +133,6 @@ export async function selectTemplate( return selected } -// Track if we've shown the multiselect help text -let hasShownMultiselectHelp = false - export async function selectAddOns( framework: Framework, mode: string, @@ -150,15 +147,6 @@ export async function selectAddOns( return [] } - // Show help text only once - if (!hasShownMultiselectHelp) { - note( - 'Use ↑/↓ to navigate • Space to select/deselect • Enter to confirm', - 'Keyboard Shortcuts', - ) - hasShownMultiselectHelp = true - } - if (allowMultiple) { const selectableAddOns = addOns.filter( (addOn) => !forcedAddOns.includes(addOn.id), @@ -168,13 +156,18 @@ export async function selectAddOns( return [] } + note( + 'Use ↑/↓ to navigate • Space to select/deselect • Enter to confirm', + 'Keyboard Shortcuts', + ) + const value = await multiselect({ - message, + message: `${message} (Space to toggle, Enter to confirm)`, options: selectableAddOns.map((addOn) => ({ - value: addOn.id, - label: addOn.name, - hint: addOn.description, - })), + value: addOn.id, + label: addOn.name, + hint: addOn.description, + })), maxItems: selectableAddOns.length, required: false, })