fix: support disabled options in autocomplete

.changeset/bitter-sides-accept.md

@@ -0,0 +1,6 @@
+---
+"@clack/prompts": patch
+"@clack/core": patch
+---
+
+Disallow selection of disabled options in autocomplete.

packages/core/src/prompts/autocomplete.ts

@@ -203,8 +203,14 @@ export default class AutocompletePrompt<T extends OptionLike> extends Prompt<
 			} else {
 				this.filteredOptions = [...options];
 			}
-			this.#cursor = getCursorForValue(this.focusedValue, this.filteredOptions);
-			this.focusedValue = this.filteredOptions[this.#cursor]?.value;
+			const valueCursor = getCursorForValue(this.focusedValue, this.filteredOptions);
+			this.#cursor = findCursor(valueCursor, 0, this.filteredOptions);
+			const focusedOption = this.filteredOptions[this.#cursor];
+			if (focusedOption && !focusedOption.disabled) {
+				this.focusedValue = focusedOption.value;
+			} else {
+				this.focusedValue = undefined;
+			}
 			if (!this.multiple) {
 				if (this.focusedValue !== undefined) {
 					this.toggleSelected(this.focusedValue);

packages/core/src/utils/cursor.ts

@@ -3,6 +3,10 @@ export function findCursor<T extends { disabled?: boolean }>(
 	delta: number,
 	options: T[]
 ) {
+	const hasEnabledOptions = options.some((opt) => !opt.disabled);
+	if (!hasEnabledOptions) {
+		return cursor;
+	}
 	const newCursor = cursor + delta;
 	const maxCursor = Math.max(options.length - 1, 0);
 	const clampedCursor = newCursor < 0 ? maxCursor : newCursor > maxCursor ? 0 : newCursor;

packages/prompts/src/autocomplete.ts

@@ -104,6 +104,19 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
 			const options = this.options;
 			const placeholder = opts.placeholder;
 			const showPlaceholder = userInput === '' && placeholder !== undefined;
+			const opt = (option: Option<Value>, state: 'inactive' | 'active' | 'disabled') => {
+				const label = getLabel(option);
+				const hint =
+					option.hint && option.value === this.focusedValue ? color.dim(` (${option.hint})`) : '';
+				switch (state) {
+					case 'active':
+						return `${color.green(S_RADIO_ACTIVE)} ${label}${hint}`;
+					case 'inactive':
+						return `${color.dim(S_RADIO_INACTIVE)} ${color.dim(label)}`;
+					case 'disabled':
+						return `${color.gray(S_RADIO_INACTIVE)} ${color.strikethrough(color.gray(label))}`;
+				}
+			};
 
 			// Handle different states
 			switch (this.state) {
@@ -180,15 +193,10 @@ export const autocomplete = <Value>(opts: AutocompleteOptions<Value>) => {
 									columnPadding: hasGuide ? 3 : 0, // for `|  ` when guide is shown
 									rowPadding: headings.length + footers.length,
 									style: (option, active) => {
-										const label = getLabel(option);
-										const hint =
-											option.hint && option.value === this.focusedValue
-												? color.dim(` (${option.hint})`)
-												: '';
-
-										return active
-											? `${color.green(S_RADIO_ACTIVE)} ${label}${hint}`
-											: `${color.dim(S_RADIO_INACTIVE)} ${color.dim(label)}${hint}`;
+										return opt(
+											option,
+											option.disabled ? 'disabled' : active ? 'active' : 'inactive'
+										);
 									},
 									maxItems: opts.maxItems,
 									output: opts.output,
@@ -239,6 +247,9 @@ export const autocompleteMultiselect = <Value>(opts: AutocompleteMultiSelectOpti
 				: '';
 		const checkbox = isSelected ? color.green(S_CHECKBOX_SELECTED) : color.dim(S_CHECKBOX_INACTIVE);
 
+		if (option.disabled) {
+			return `${color.gray(S_CHECKBOX_INACTIVE)} ${color.strikethrough(color.gray(label))}`;
+		}
 		if (active) {
 			return `${checkbox} ${label}${hint}`;
 		}

packages/prompts/test/__snapshots__/autocomplete.test.ts.snap

@@ -20,6 +20,115 @@ exports[`autocomplete > can be aborted by a signal 1`] = `
 ]
 `;
 
+exports[`autocomplete > cannot select disabled options when only one left 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+│
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: k█ (1 match)
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=6>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`autocomplete > displays disabled options correctly 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+│
+│  Search: _
+│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search:
+│  ○ Apple
+│  ● Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=5>",
+  "<erase.down>",
+  "│  ○ Banana
+│  ● Cherry
+│  ○ Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=6>",
+  "<erase.down>",
+  "│  ○ Cherry
+│  ● Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=7>",
+  "<erase.down>",
+  "│  ○ Grape
+│  ● Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=4>",
+  "<erase.down>",
+  "│  ● Apple
+│  ○ Banana
+│  ○ Cherry
+│  ○ Grape
+│  ○ Orange
+│  ○ Kiwi
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  Apple",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`autocomplete > limits displayed options when maxItems is set 1`] = `
 [
   "<cursor.hide>",
@@ -504,6 +613,120 @@ exports[`autocompleteMultiselect > can use navigation keys to select options 1`]
 ]
 `;
 
+exports[`autocompleteMultiselect > cannot select disabled options when only one left 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+│
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ◻ Kiwi
+│  ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: k█ (1 match)
+│  ◻ Kiwi
+│  ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=6>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  0 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
+exports[`autocompleteMultiselect > displays disabled options correctly 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select a fruit
+│
+│  Search: _
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ◻ Kiwi
+│  ↑/↓ to navigate • Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=3>",
+  "<erase.down>",
+  "│  Search: 
+│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ◻ Kiwi
+│  ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=5>",
+  "<erase.down>",
+  "│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ◻ Kiwi
+│  ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=6>",
+  "<erase.down>",
+  "│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ◻ Kiwi
+│  ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=7>",
+  "<erase.down>",
+  "│  ◻ Grape
+│  ◻ Orange
+│  ◻ Kiwi
+│  ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=4>",
+  "<erase.down>",
+  "│  ◻ Apple
+│  ◻ Banana
+│  ◻ Cherry
+│  ◻ Grape
+│  ◻ Orange
+│  ◻ Kiwi
+│  ↑/↓ to navigate • Space/Tab: select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=4>",
+  "<erase.line><cursor.left count=1>",
+  "│  ◼ Apple",
+  "<cursor.down count=7>",
+  "<cursor.backward count=999><cursor.up count=11>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select a fruit
+│  1 items selected",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`autocompleteMultiselect > renders error when empty selection & required is true 1`] = `
 [
   "<cursor.hide>",