Skip to content

feat(autocomplete-multiselect): allow select all and selecting inverse using shift up/down #354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat(autocomplete-multiselect): allow select all and selecting inverse using shift up/down #354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4b2280a
feat: allow selecting all and selecting inverse
tefkah Jul 10, 2025
2f720dc
chore: add changeset
tefkah Jul 10, 2025
8ed6d41
fix: use shift u/d instead of l/r
tefkah Jul 10, 2025
4ae7056
fix: show shift instead of ctrl
tefkah Jul 10, 2025
e6bc235
Merge branch 'main' into feat/select-all-inverse
tefkah Jul 23, 2025
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
6 changes: 6 additions & 0 deletions .changeset/happy-spoons-push.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@clack/prompts": minor
"@clack/core": minor
---

add inversion and selecting all options for autocomplete multiselect
39 changes: 39 additions & 0 deletions packages/core/src/prompts/autocomplete.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,12 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<

// Start navigation mode with up/down arrows
if (isUpKey || isDownKey) {
// shift up/down behavior
if (key.shift) {
this.#handleShiftNavigation(isUpKey);
return;
}

this.#cursor = Math.max(
0,
Math.min(this.#cursor + (isUpKey ? -1 : 1), this.filteredOptions.length - 1)
Expand Down Expand Up @@ -173,6 +179,39 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
}
}

#handleShiftNavigation(isUpKey: boolean) {
// invert if Shift + Down
if (!isUpKey) {
this.invertSelectedFiltered();
return;
}

// set to none if all are selected
if (this.selectedValues.length === this.filteredOptions.length) {
this.deselectAllFiltered();
return;
}

this.selectAllFiltered();
return;
}

selectAllFiltered() {
this.selectedValues = this.filteredOptions.map((opt) => opt.value);
}

deselectAllFiltered() {
this.selectedValues = this.filteredOptions
.filter((opt) => !this.selectedValues.includes(opt.value))
.map((opt) => opt.value);
}

invertSelectedFiltered() {
this.selectedValues = this.filteredOptions
.filter((opt) => !this.selectedValues.includes(opt.value))
.map((opt) => opt.value);
}

deselectAll() {
this.selectedValues = [];
}
Expand Down
1 change: 1 addition & 0 deletions packages/prompts/src/autocomplete.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
// Instructions
const instructions = [
`${color.dim('↑/↓')} to navigate`,
`${color.dim('Shift+↑/↓')} select all/inverse`,
`${color.dim('Space:')} select`,
`${color.dim('Enter:')} confirm`,
`${color.dim('Type:')} to search`,
Expand Down
237 changes: 233 additions & 4 deletions packages/prompts/test/__snapshots__/autocomplete.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,48 @@ exports[`autocomplete > supports initialValue 1`] = `
]
`;

exports[`autocompleteMultiselect > all selection only applies to filtered options 1`] = `
[
"<cursor.hide>",
"│
◆ Select a fruit

│ Search: _
│ ◻ Apple
│ ◻ Banana
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=3>",
"<erase.down>",
"│ Search: r█ (3 matches)
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=8>",
"<cursor.down count=4>",
"<erase.down>",
"│ ◼ Cherry
│ ◼ Grape
│ ◼ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=8>",
"<cursor.down count=1>",
"<erase.down>",
"◇ Select a fruit
│ 3 items selected",
"
",
"<cursor.show>",
]
`;

exports[`autocompleteMultiselect > can be aborted by a signal 1`] = `
[
"<cursor.hide>",
Expand All @@ -298,14 +340,201 @@ exports[`autocompleteMultiselect > can be aborted by a signal 1`] = `
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"
",
"<cursor.show>",
]
`;

exports[`autocompleteMultiselect > everything can be selected with left arrow 1`] = `
[
"<cursor.hide>",
"│
◆ Select a fruit

│ Search: _
│ ◻ Apple
│ ◻ Banana
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=4>",
"<erase.down>",
"│ ◼ Apple
│ ◼ Banana
│ ◼ Cherry
│ ◼ Grape
│ ◼ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=1>",
"<erase.down>",
"◇ Select a fruit
│ 5 items selected",
"
",
"<cursor.show>",
]
`;

exports[`autocompleteMultiselect > everything is deselected if left is pressed again 1`] = `
[
"<cursor.hide>",
"│
◆ Select a fruit

│ Search: _
│ ◻ Apple
│ ◻ Banana
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=4>",
"<erase.down>",
"│ ◼ Apple
│ ◼ Banana
│ ◼ Cherry
│ ◼ Grape
│ ◼ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=4>",
"<erase.down>",
"│ ◻ Apple
│ ◻ Banana
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=1>",
"<erase.down>",
"◇ Select a fruit
│ 0 items selected",
"
",
"<cursor.show>",
]
`;

exports[`autocompleteMultiselect > inverse can be selected with right arrow 1`] = `
[
"<cursor.hide>",
"│
◆ Select a fruit

│ Search: _
│ ◻ Apple
│ ◻ Banana
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=3>",
"<erase.down>",
"│ Search: 
│ ◻ Apple
│ ◻ Banana
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=5>",
"<erase.line><cursor.left count=1>",
"│ ◼ Banana",
"<cursor.down count=5>",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=4>",
"<erase.down>",
"│ ◼ Apple
│ ◻ Banana
│ ◼ Cherry
│ ◼ Grape
│ ◼ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=1>",
"<erase.down>",
"◇ Select a fruit
│ 4 items selected",
"
",
"<cursor.show>",
]
`;

exports[`autocompleteMultiselect > inversion only applies to filtered options 1`] = `
[
"<cursor.hide>",
"│
◆ Select a fruit

│ Search: _
│ ◻ Apple
│ ◻ Banana
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=3>",
"<erase.down>",
"│ Search: r█ (3 matches)
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=8>",
"<cursor.down count=3>",
"<erase.down>",
"│ Search: r (3 matches)
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=8>",
"<cursor.down count=5>",
"<erase.line><cursor.left count=1>",
"│ ◼ Grape",
"<cursor.down count=3>",
"<cursor.backward count=999><cursor.up count=8>",
"<cursor.down count=4>",
"<erase.down>",
"│ ◼ Cherry
│ ◻ Grape
│ ◼ Orange
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=8>",
"<cursor.down count=1>",
"<erase.down>",
"◇ Select a fruit
│ 2 items selected",
"
",
"<cursor.show>",
]
`;

exports[`autocompleteMultiselect > renders error when empty selection & required is true 1`] = `
[
"<cursor.hide>",
Expand All @@ -318,7 +547,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=1>",
Expand All @@ -332,7 +561,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=11>",
"<cursor.down count=1>",
Expand All @@ -345,7 +574,7 @@ exports[`autocompleteMultiselect > renders error when empty selection & required
│ ◻ Cherry
│ ◻ Grape
│ ◻ Orange
│ ↑/↓ to navigate • Space: select • Enter: confirm • Type: to search
│ ↑/↓ to navigate • Shift+↑/↓ select all/inverse • Space: select • Enter: confirm • Type: to search
└",
"<cursor.backward count=999><cursor.up count=10>",
"<cursor.down count=1>",
Expand Down
Loading
Loading