Create Multiselect Component

[coreymcollins]

What We Need

We should be able to select multiple terms (categories, tags, custom taxonomy) for use specifically in the Recent Posts block, but also to be utilized wherever necessary since it will be built as a component. The way ACF currently does this works well for us:

Component should, ideally, allow for:

• Customization of taxonomy to search
• Allow for setting of max number of terms to be selected
• Allow for click-to-add and click-to-remove
• Allow for typing to search for a term

I don't think it necessarily needs to look exactly like the ACF example, but all of that functionality is pretty 💯 IMO.

I did do some initial research into React-based multi-select tools here: #9 (comment)

I found this one which seemed to fill the needs we have, but was not able to get it to work fully: https://github.com/JedWatson/react-select

I'm not tied to that React Select component specifically, it was just one of the nicer ones I came across in my search.

Why do we need it?

Gutenberg does not feel it important to build a multiselect out of the box: WordPress/gutenberg#1044

Per the last comment there:

Going to close as we don't have any immediate need for such a component, so it's unlikely to be built unless someone else wants to contribute it.

This could be a cool win for us to build something useful that we need, then also get it into core Gutenberg!

[coreymcollins]

Started digging at this again, but then I had a realization that we could probably use what @jomurgel is doing here (once it's complete) as a base for this: #10 (comment)

His component (if updated to his latest CodePen at the end of the thread) fits the criteria above in that it:

• Is searchable
• Allows for adding/removing multiple items

It would just need to also be able to:

• Set min/max numbers of selected items
• Allow for customization in what is being queried
• Allow for manual drag & drop ordering

I don't think it's a 1:1 comparison, but I think once complete his work could get us like 80% of the way toward a general Multi Select component for taxonomies.

Thoughts @gregrickaby @kellenmace @jomurgel?

[jomurgel]

Did some work on this, this weekend, as a proof of concept. This doesn't have any search functionality, but takes in a simple array, outputs to list and allows for adding/removing from top bar.

Branch: feature/#28-multiselect-component

Usage

import MultiSelect from '../../components/multiselect';

<MultiSelect value={ [ 'apples', 'oranges', 'peach', 'pears', 'plums' ] } />

The value prop takes in a simple array of strings at the moment.

Output

There is a function of the component called toggleDropdown() which is intended to show/hide the dropdown on "input focus", but there was a problem. There is no input. I had a basic input working <input placeholder="Select Items..." type="text" value={ this.state.selectedItems } onChange="" /> which would output the selected items into the input value, but this doesn't allow the styling of the values.

Other considerations will be accessibility. I think we'll need to build out something with inputs or as a select field that functions as a form element rather than divs, but since this is a proof of concept I'm not too worried about it at this moment.

POC Pen:
https://codepen.io/jomurgel/pen/WzLYNG?editors=0100

Something like https://semantic-ui.com/modules/dropdown.html or http://jedwatson.github.io/react-select/ might also be worth looking into. Both have the functionality we're looking for and the later is already built in react. Though not really WP core ready, certainly worth looking into for our uses.

[efuller]

Made some progress on this today.

I'm not 💯 on how the API for this component is going to work/look yet, but I'm just working to get some basic functionality in place.

I refactored a few functions and got tags and categories being pulled in from the API.

[efuller]

Update:

Made more progress here today.

I worked on turning everything into components.

At this point, both categories and tags are being displayed. Both can selected/deselected.

[paaljoachim]

What about adding some thoughts on this issue?
Query Block - more advanced / multi select query options
WordPress/gutenberg#30706