feat: add multi-select capabillity to AutocompleteWithSuggestions

[dkoo]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This complete the AutocompleteWithSuggestions component to add multi-select capability. This is needed for the proposed child listings UI design in Newspack Listings.

Closes #954.

How to test the changes in this Pull Request:

1. Navigate to the components demo page. Confirm there are now two instances of the AutocompleteWithSuggestions component: the first is single-select (unchanged from master), the second is multi-select with checkboxes instead of links.
2. Test the single-select UI; its behavior should be unchanged from master, except that the selected item is now shown at the top of the component separate from the autocomplete field, which is now only used for search functionality:

3. Test the multi-select UI:

• Post type selector: This dropdown lets you change which post type is shown in suggestions, both in the autocomplete field and in the suggestions list. (This can actually be used in both single-select and multi-select flavors of the component, but is only shown in multi-select to demonstrate that it's optional.)
• Multi-select capability: You should now be able to select more than one item. Selected items appear at the top of the component, and are checked if displayed in the suggestions list. Checking an item from the list should add it to the selections, unchecking it should remove it. Typing a post title into the autocomplete field and selecting a suggestion should add the suggestion if it's not already selected, and remove it if it is.
• "Clear all" feature: If more than one item is selected, a "Clear all" button will appear at the top of the component. Clicking this will remove all selections and return the component to an empty state.

4. Test load more functionality: For both single-select and multi-select flavors, if there are more posts to suggest than the suggestionsToFetch prop (default: 10), a "Load more" button will appear at the end of the suggestions list. Clicking this button will load suggestionsToFetch more posts until all posts of the selected post type are loaded.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[adekbadek]

Nice! I like how the default props make it easier to use the component.

[dkoo]

@thomasguillot One thing I should mention is that I deviated slightly from your design mockup with the selected items here:

In your mockup:

In the implemented version, we group all selections together regardless of their post type. I found that grouping different post types into separate sections was causing the selection area to be very tall if more than one post type is selected, and also caused a lot of screen jitter when post type sections get added or removed.

[dkoo]

@adekbadek I've been testing this component with a Newspack Listings feature and doing so has uncovered a few bugs/shortcomings in the component as you reviewed it. Here's a summary in case you want to re-test and/or re-review:

1. 6da0a28 - This fixes a bug where if you pass a fetchSuggestions function as a prop to the component, it didn't receive info about the currently selected post type. This is important when passing the fetch function as a prop because the selected post type determines what the suggestions endpoint needs to be.
2. 8bda922 - This fixes a similar set of bugs when using the autocomplete field with a passed fetchSuggestions prop. The AutocompleteTokenfield component was not passing the extra param for selected post type, nor appending the extra postType property on selected items onChange (needed so that we can add and remove selection data using the correct post types via REST API).

To test (1), you can pass in a fetchSuggestions prop like this to the component:

fetchSuggestions={ ( search = null, offset = 0, postType ) => console.log( search, offset, postType ) }

Make sure the logged params match the component's state (tokenfield search term, postType matching selection in the dropdown). Offset will always be 0 unless you actually return posts data in the function which will let you use load more functionality in the suggestions list. Make sure this is true for both the first execution (which would be to fetch the list of suggestions) and any executions when entering search terms into the autocomplete field.

To test (2), pass in an onChange prop like so:

onChange={ items => console.log( items ) }

Select items by clicking them from the suggestion list and selecting them from the autocomplete search results. Confirm that each item in the array contains both the item's id and its correct postType. Confirm the same after removing some previously selected items.

[dkoo]

I've been using the component from this branch in Campaigns, Listings, and Blocks for several days now without issue, so I'm going to go ahead and merge/publish to NPM. If any further bugs or features need to be addressed, we can do that in additional and smaller PRs. Thanks to both of you for your reviews, @thomasguillot and @adekbadek!

[matticbot]

🎉 This PR is included in version 1.42.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.42.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀