hsuanyi-chou / shadcn-ui-expansions

More components built on top of shadcn-ui.
https://shadcnui-expansions.typeart.cc/
MIT License
823 stars 38 forks source link

Additional Customization for Multiselect #12

Open BrendanC23 opened 8 months ago

BrendanC23 commented 8 months ago

This is a great library. I'd love to see more customizations for the multi-select. The current implementation is great for a multi-select, but I think the component could work well as a more general autocomplete/combobox with more functionality than Shadcn's implementation. Would you consider adding any of the following?

  1. Limiting the number of displayed items (show the first N items initially, and then show N matching items after the user enters search text)
  2. Providing an option to show selected items as text instead of tags (showing the text of a single selection, or "N items selected" if there are multiple, and then show a checkmark in the dropdown list)
  3. Along with suggestion 2, it would be useful to be able to switch between a combobox mode (requiring the user to select a provided option, and not allowing them to enter arbitrary input) and an autocomplete mode (allowing the user to either choose a provided option or to enter arbitrary text).
  4. The form example gives a result of
{
  "frameworks": [
    {
      "label": "React",
      "value": "react"
    }
  ]
}

Compare this to Shadcn's combobox, which just gives the value:

{
  "language": "en"
}

The latter seems better, as the label is just for display, and the input value that should be submitted is just the value.

ghandic commented 1 month ago

I modified to use ReactNode but needed to update this

// const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;
const cloneOption = { ...groupOption } as GroupOption;