All categories do not show in the Categories component

[mattsherman]

Description

When using the new product editor on a store with more than 30 categories:

• All the categories do not appear in the Categories dropdown initially
• There is no indication that all the categories are not shown
• There is no way for the user to find the missing categories other than searching for them
  • It is not immediately obvious that you can search for categories
• If editing an existing product with categories set, those selected categories may not appear initially in the dropdown as selected if they are not part of the initial/only 30 that are loaded

What I expect as a user

• All categories would be shown in the Categories dropdown
  • If not initially, it should be obvious for me to know how to get the rest (or more) to appear
• It should be obvious that I can search for categories

• If I am editing an existing product with categories set, the selected categories should appear initially in the dropdown as selected

  To reproduce

1. Create more than 30 categories, including some that are hierarchical. For example, I set up the following categories:

1
    a
        a1
        a2
        a3
        a4
        a5
        a6
        a7
        a8
        a9
        a10
    b
    c
    d
    e
    f
2
3
4
5
6
7
8
9
10
[ ... ]
30

2. Go to Products > Add New > Organization
3. Open the Categories dropdown and verify that all categories are not shown. Scroll and see that they still don't all appear.

5. Search for a nested category (a1). Select it.
6. Save the product.

7. Reload the product.
8. Verify that the selected category does not appear selected in the dropdown (though it is shown in the list of selected categories).

[mattsherman]

@jarekmorawski @j111q UX guidance requested!

[jarekmorawski]

Thanks for reporting this, Matt. Why do we only load 30 categories? Is there a technical constraint we were not aware of? From the UX point of view, we could pre-load the first 30 categories and pull the rest as the user scrolls through the list. We'd do it in batches to improve performance.

It should be obvious that I can search for categories

We know a placeholder text won't work due to limited space when the user adds more than a few chips, but I think we'd explore swapping the chevron for a search icon.

If editing an existing product with categories set, those selected categories may not appear initially in the dropdown as selected if they are not part of the initial/only 30 that are loaded

That's not great. We should always show selected items in the dropdown. Would it help if we moved them to the top of the list after a product is saved?

Here's a detailed overview of the dropdown UX: AkVNGImLgSqCObTQ3idVn7-fi-1613_196032