[🐞] cli: stange glitch in list

harshmangalam commented 1 year ago

Which component is affected?

Starters / CLI

Describe the bug

https://github.com/BuilderIO/qwik/assets/57381638/f699ee05-a5b0-4c87-b6d4-0333e6aa7f5a

Reproduction

Run pnpm qwik add

Steps to reproduce

Create new qwik project
Run pnpm qwik add

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 122.22 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 8.6.12 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 118.0.5993.88
    Safari: 17.0

Additional Information

It selects multiple options when i use arrow keys and it also replicated the options as visible in attached video.

gioboa commented 1 year ago

Thanks for the report @harshmangalam I can reproduce it on my local env too

gioboa commented 1 year ago

I investigated the problem and it's a @clack/prompts issue. I recreated this simple example to reproduce it

import { select } from '@clack/prompts';
const options = [...Array(50).keys()].map((i) => ({
  value: `value-${i}`,
  label: `label-${i}`,
}));

await select({
  message: 'Pick up ones',
  options,
});

Btw from a fast investigation this issue is related to the height/available lines of the terminal. in fact, if I give to the terminal more "space" the issue disappears.

They are working to solve this problem https://github.com/natemoo-re/clack/issues/173

I close this issue because it's not a Qwik one. @harshmangalam I love your help on stackoverflow 🚀

QwikDev / qwik