Downshift: [useMultipleSelection] Add New Item if not Exists

[koolamusic]

• downshift version: "downshift": "5.4.3",
• node version: 12
• npm (or yarn) version: npm

Relevant code or config

What you did:
Building up from the example https://codesandbox.io/s/usemultipleselection-combobox-usage-k5jtx How can a multiple selection be extended to add new fields if it does not exist, so a user can create a new selection based on their input: See here https://react-select.com/advanced#accessing-internals

Suggested solution:
A prop that allows you to append a new selection to items based on user input value

[silviuaavram]

Hi! I don't think we should support that. Since you can pass whatever items you want in your combobox, it is up to you to create your own UI and logic to add an item to items.

react-select is an e2e component, downshift's hooks are only exposing the logic that makes your widget working and accessible, giving you the option to build your UI in any way you want.

[mattrothenberg]

We built this functionality into our design system at Clearbit. With a little bit of luck, we'll be open-sourcing our implementation in the coming months!

[koolamusic]

@mattrothenberg this is amazing, I'm in the middle of a project where I need to move really fast to deliver on the product promise, and so I'm bent between react-select and downshift due to this single issue.

This is kinda like the deal-breaker, and I'd appreciate having you share your implementation with the community.
I've already played with the code sandbox, however, I'm having issues pushing the user-created item to setValue

[oscar-b]

@mattrothenberg Hey, looks really nice! Did you ever open source it?

[silviuaavram]

It can be really cool to have a PoC created in https://github.com/downshift-js/downshift-examples @mattrothenberg . We can even have it on https://www.downshift-js.com/ if everyone is OK with it. It does not need to be your component, just a PoC on how to achieve this scenario.

[mattrothenberg]

@silviuaavram I'll get an example created this weekend. Stay tuned!

[mattrothenberg]

@silviuaavram I'd love to work with you to get the code from this Codesandbox on the downshift-examples repo. LMK how we can do that.

https://codesandbox.io/s/angry-leftpad-0j4gy?file=/src/CreateablePicker.tsx

Enjoy, everyone! Here's a POC of a createable multi-picker. There are likely some weird bugs/edge cases that I didn't catch, but this should point folks in the right direction.

💕

[silviuaavram]

That should be straightforward @mattrothenberg just go to https://codesandbox.io/s/github/kentcdodds/downshift-examples and fork it. You can contribute back to the origin via codesandbox, which is pretty cool.

[mattrothenberg]

@silviuaavram Thanks, PR created. I'd appreciate your feedback on the code, as I probably did some crazy stuff to get the "create" functionality working 🤓

[silviuaavram]

I love the usage, brilliant work @mattrothenberg ! Thank you for your effort, it's very much appreciated!

[silviuaavram]

Closing as https://github.com/downshift-js/downshift-examples/pull/30 is merged.