Multi-level search in a Select prompt

[KasMA1990]

Hello 👋

I'm using cliffy with two levels of Select prompting at the moment. That is, users need to select some item, but in order to not overwhelm them, those items are broken down into categories. The user must then first select a category before they can select an item. You can visualize it as:

{
  "category1": ["item1","item2"],
  "category2": ["item3"],
  "category3": ["item4","item5","item6"]
}

This works pretty well, but I really wish that I could start searching for items immediately when I am prompted to choose a category. Is there a nice way to achieve that today? And if not, is it something you think cliffy should support?

[KasMA1990]

Another issue related to this is that it would be really nice to be able to move back when you've entered a category, to come back to the previous one.

[c4spar]

No it is not supported rn but sounds reasonable for me. I think we could implement it like this:

const item: string = await Select.prompt({
  message: "Select an item",
  options: [
    "item1",
    {
      name: "category1",
      options: ["item1", "item2", "item3"],
    },
    {
      name: "category2",
      options: [{ name: "item1", value: "Item 1" }],
    },
    {
      name: "category3",
      options: [
        "item1",
        {
          name: "subCategory",
          options: ["item1", "item2"],
        },
      ],
    },
  ],
});

• If an option has an options property than it's a category.
• category items are hidden by default.
• when a category is selected, only the category items and a back button are shown.
• a category can have a sub category.
• when searching, all matching category items are shown, all non-matching are still hidden.

? Choose VPC ⌕ xxx
❯ match1
  category1
    match2
    match3
  category2
    match4
  category3
    subCategory
      match5

[KasMA1990]

That sounds quite lovely 😊 Is this something you would like assistance to build?

[c4spar]

Any help is wellcome 🙂

[KasMA1990]

Sounds good 😊 I've thought a bit more about the searching, and have come up with these questions:

• should categories be selectable in search results? I would probably expect them to be greyed out, and not something you can navigate to.
• what if the category is a search hit, but an underlying option is not? Should all the options in that category be displayed? Should the category be selectable in that particular case? Should the category even count as a search hit?

An MVP solution could be to only allow options to be searchable, and to let displayed categories in the search results be something you can navigate to.

[KasMA1990]

I'll make a note here if I start actually developing, so don't take my questions and clarifications as indication that I've started on anything 😊

[c4spar]

should categories be selectable in search results? I would probably expect them to be greyed out, and not something you can navigate to.

Should be fine if they are grayed out.

what if the category is a search hit, but an underlying option is not? Should all the options in that category be displayed? Should the category be selectable in that particular case? Should the category even count as a search hit?

I think it should be fine to make only items sarchable.

[KasMA1990]

Another question: when you've navigated into a category, and you want to navigate back, I assume there should some kind of "Back" item as the top entry to select. But should you also be able to navigate back by e.g. pressing backspace?

[c4spar]

I think it would be nice. The left arrow key would be also nice. But can be also implemented in a second PR.

[c4spar]

But maybe it conflicts with the search bar.

[KasMA1990]

I like using the arrow keys actually, but probably backspace is a bad idea. Because if you're searching and use backspace to delete your search term, you're likely to navigate back by accident, if you press backspace too many times.

But thinking with arrow keys, I like these rules:

• If you have a search term, then the left and right arrow keys do nothing, otherwise:
• Right arrow key navigates into a category
• If you are on the "Back" item inside a category, left arrow key navigates back
• If you are not on the "Back" item, left arrow key will jump to that item

But yes, I agree this can wait for a second PR 😊

[c4spar]

Sounds good 👍

[KasMA1990]

Alright, I've built a draft implementation this weekend 😊 (see ref above ^)