Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions .changeset/multiselect-keyboard-hint.md
Original file line number Diff line number Diff line change
@@ -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.
27 changes: 10 additions & 17 deletions packages/cli/src/ui-prompts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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),
Expand All @@ -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,
})
Expand Down
Loading