bombshell-dev / clack

Effortlessly build beautiful command-line apps
https://clack.cc
5.23k stars 88 forks source link

[Bug] multiselect only shows the hint on the first item in the options #196

Open skoblenick opened 3 weeks ago

skoblenick commented 3 weeks ago

Environment

Describe the bug

The multiselect only shows the hint on the first item in the options, as shown below:

  1. scenario 1:

    ◆  Select additional tools.
    │  ◼ Prettier (recommended)
    │  ◼ ESLint
    │  ◻ Stylelint
    │  ◻ GitHub Action
    └
  2. scenario 2:

◆  Select additional tools.
│  ◻ Prettier
│  ◼  ESLint
│  ◻ Stylelint
│  ◼ GitHub Action
└

To Reproduce

Basically taken from your examples in this repo; see https://stackblitz.com/edit/node-kwuxhe

Steps to reproduce the behavior:

  1. run npm init -y
  2. run npm install @clack/prompts --save
  3. add "type": "module" to the package.json
  4. use the code:

    #!/usr/bin/env node
    
    import * as p from '@clack/prompts';
    
    async function main() {
      const project = await p.group({
        scenario1: () =>
          p.multiselect({
            message: 'Scenario 1.',
            initialValues: ['prettier', 'eslint'],
            options: [
              { value: 'prettier', label: 'Prettier', hint: 'recommended' },
              { value: 'eslint', label: 'ESLint', hint: 'recommended' },
              { value: 'stylelint', label: 'Stylelint' },
              { value: 'gh-action', label: 'GitHub Action' },
            ],
          }),
        scenario2: () =>
          p.multiselect({
            message: 'Scenario 2',
            initialValues: ['eslint', 'gh-action'],
            options: [
              { value: 'prettier', label: 'Prettier' },
              { value: 'eslint', label: 'ESLint', hint: 'recommended' },
              { value: 'stylelint', label: 'Stylelint' },
              { value: 'gh-action', label: 'GitHub Action', hint: 'recommended' },
            ],
          }),
      });
    }
    
    main().catch(console.log);
  5. run the code with node ./index.js

Expected behavior

I would expect the output from the prompt to be:

◆  Scenario 1.
│  ◼ Prettier (recommended)
│  ◼ ESLint (recommended)
│  ◻ Stylelint
│  ◻ GitHub Action
└
◆  Scenario 2.
│  ◻ Prettier
│  ◼ ESLint (recommended)
│  ◻ Stylelint
│  ◼ GitHub Action (recommended)
└