Feat (select): Allow default config in Select prompt (#1329)

* Feature: allow default on select --------- Co-authored-by: sakulstra <[email protected]>
SBoudrias · Nov 5, 2023 · 1b3df3a · 1b3df3a
1 parent 1c4c80a
commit 1b3df3a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/select/README.md b/packages/select/README.md
@@ -51,6 +51,7 @@ const answer = await select({
 | -------- | ---------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | message  | `string`                                                                                                   | yes      | The question to ask                                                                                                                                                                                                                                                                 |
 | choices  | `Array<{ value: string, name?: string, description?: string, disabled?: boolean \| string } \| Separator>` | yes      | List of the available choices. The `value` will be returned as the answer, and used as display if no `name` is defined. Choices who're `disabled` will be displayed, but not selectable. The `description` will be displayed under the prompt when the cursor land over the choice. |
+| default  | `string`                                                                                                   | no       | Defines in front of which item the cursor will initially appear. When omitted, the cursor will appear on the first selectable item.                                                                                                                                                 |
 | pageSize | `number`                                                                                                   | no       | By default, lists of choice longer than 7 will be paginated. Use this option to control how many choices will appear on the screen at once.                                                                                                                                         |
 | loop     | `boolean`                                                                                                  | no       | Defaults to `true`. When set to `false`, the cursor will be constrained to the top and bottom of the choice list without looping.                                                                                                                                                   |
 

diff --git a/packages/select/select.test.mts b/packages/select/select.test.mts
@@ -452,4 +452,27 @@ describe('select prompt', () => {
 
     await expect(answer).resolves.toEqual('pineapple');
   });
+
+  it('Allows setting a default value', async () => {
+    const { answer, events, getScreen } = await render(select, {
+      message: 'Select a number',
+      choices: numberedChoices,
+      default: numberedChoices[3].value,
+    });
+
+    expect(getScreen()).toMatchInlineSnapshot(`
+        "? Select a number (Use arrow keys)
+          1
+          2
+          3
+        ❯ 4
+          5
+          6
+          7
+        (Use arrow keys to reveal more choices)"
+      `);
+
+    events.keypress('enter');
+    await expect(answer).resolves.toEqual(4);
+  });
 });
diff --git a/packages/select/src/index.mts b/packages/select/src/index.mts
@@ -30,6 +30,7 @@ type SelectConfig<Value> = PromptConfig<{
   choices: ReadonlyArray<Choice<Value> | Separator>;
   pageSize?: number;
   loop?: boolean;
+  default?: Value;
 }>;
 
 type Item<Value> = Separator | Choice<Value>;
@@ -76,7 +77,16 @@ export default createPrompt(
       return { first, last };
     }, [items]);
 
-    const [active, setActive] = useState(bounds.first);
+    const defaultItemIndex = useMemo(() => {
+      if (!('default' in config)) return -1;
+      return items.findIndex(
+        (item) => isSelectable(item) && item.value === config.default,
+      );
+    }, [config.default, items]);
+
+    const [active, setActive] = useState(
+      defaultItemIndex === -1 ? bounds.first : defaultItemIndex,
+    );
 
     // Safe to assume the cursor position always point to a Choice.
     const selectedChoice = items[active] as Choice<Value>;