search

oxidecomputer / console

Oxide Web Console
https://console-preview.oxide.computer
Mozilla Public License 2.0
139 stars 11 forks source link

Add tags inline in MultiSelect tag picker #408

Closed david-crespo closed 2 years ago

david-crespo commented 3 years ago

We have a MultiSelect component already, but it's not really complete. It only lets you select predefined tags from a dropdown. To support use as a tag picker, we should support typing new tags inline and creating them that way (provisionally on the client until submit, which would create them on the server?). Just add an input field inline inside the "input" box and pressing enter adds tags to a list persisted in state. We might not need the dropdown aspect at all, though it's worth thinking about how to hint to the user when the tag they're adding already exists in the system, which might confirm for them that it's the one they actually mean to add to a given resource.

We're currently using Downshift's useMultipleSelection for this, and that's probably sufficient, but consider using React Select (TypeScript rewrite in beta, which is always good). One problem with React Select is bundle size. By my manual testing, adds 24 KB to the minified vendor bundle, while React Select adds 73 KB. 🤦‍♂️

david-crespo commented 2 years ago

Whether we keep this issue depends on what the latest tag picker design is.

david-crespo commented 2 years ago

Closing because this is not necessarily the design and we probably don't even want to keep that component.