Use selects with loadMore option

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -117,6 +117,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
               }
 
               const displayCustomValue =
+                inputValue &&
                 inputValue.length > 0 &&
                 allowCustomValues &&
                 !choices.find(

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -27,7 +27,7 @@ import {
 } from "@saleor/products/utils/data";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
-import { UserError } from "../../../types";
+import { FetchMoreProps, UserError } from "../../../types";
 import {
   createAttributeChangeHandler,
   createAttributeMultiChangeHandler,
@@ -67,6 +67,9 @@ interface ProductCreatePageProps {
   categories: SearchCategories_search_edges_node[];
   currency: string;
   disabled: boolean;
+  fetchMoreCategories: FetchMoreProps;
+  fetchMoreCollections: FetchMoreProps;
+  fetchMoreProductTypes: FetchMoreProps;
   productTypes?: Array<{
     id: string;
     name: string;
@@ -92,6 +95,9 @@ export const ProductCreatePage: React.StatelessComponent<
   errors: userErrors,
   fetchCategories,
   fetchCollections,
+  fetchMoreCategories,
+  fetchMoreCollections,
+  fetchMoreProductTypes,
   header,
   productTypes: productTypeChoiceList,
   saveButtonBarState,
@@ -271,6 +277,9 @@ export const ProductCreatePage: React.StatelessComponent<
                   errors={errors}
                   fetchCategories={fetchCategories}
                   fetchCollections={fetchCollections}
+                  fetchMoreCategories={fetchMoreCategories}
+                  fetchMoreCollections={fetchMoreCollections}
+                  fetchMoreProductTypes={fetchMoreProductTypes}
                   fetchProductTypes={fetchProductTypes}
                   productType={productType}
                   productTypeInputDisplayValue={productType.name}

src/products/components/ProductOrganization/ProductOrganization.tsx

@@ -22,7 +22,7 @@ import SingleAutocompleteSelectField, {
 } from "@saleor/components/SingleAutocompleteSelectField";
 import { ChangeEvent } from "@saleor/hooks/useForm";
 import { maybe } from "@saleor/misc";
-import { FormErrors } from "@saleor/types";
+import { FetchMoreProps, FormErrors } from "@saleor/types";
 
 interface ProductType {
   hasVariants: boolean;
@@ -62,6 +62,9 @@ interface ProductOrganizationProps extends WithStyles<typeof styles> {
   productTypes?: SingleAutocompleteChoiceType[];
   fetchCategories: (query: string) => void;
   fetchCollections: (query: string) => void;
+  fetchMoreCategories: FetchMoreProps;
+  fetchMoreCollections: FetchMoreProps;
+  fetchMoreProductTypes?: FetchMoreProps;
   fetchProductTypes?: (data: string) => void;
   onCategoryChange: (event: ChangeEvent) => void;
   onCollectionChange: (event: ChangeEvent) => void;
@@ -81,6 +84,9 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
     errors,
     fetchCategories,
     fetchCollections,
+    fetchMoreCategories,
+    fetchMoreCollections,
+    fetchMoreProductTypes,
     fetchProductTypes,
     productType,
     productTypeInputDisplayValue,
@@ -115,6 +121,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
               onChange={onProductTypeChange}
               fetchChoices={fetchProductTypes}
               data-tc="product-type"
+              {...fetchMoreProductTypes}
             />
           ) : (
             <>
@@ -160,6 +167,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
             onChange={onCategoryChange}
             fetchChoices={fetchCategories}
             data-tc="category"
+            {...fetchMoreCategories}
           />
           <FormSpacer />
           <Hr />

src/products/views/ProductCreate.tsx

@@ -33,11 +33,20 @@ export const ProductUpdate: React.StatelessComponent<
 
   return (
     <SearchCategories variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {({ search: searchCategory, result: searchCategoryOpts }) => (
+      {({
+        loadMore: loadMoreCategories,
+        search: searchCategory,
+        result: searchCategoryOpts
+      }) => (
         <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
-          {({ search: searchCollection, result: searchCollectionOpts }) => (
+          {({
+            loadMore: loadMoreCollections,
+            search: searchCollection,
+            result: searchCollectionOpts
+          }) => (
             <SearchProductTypes variables={DEFAULT_INITIAL_SEARCH_DATA}>
               {({
+                loadMore: loadMoreProductTypes,
                 search: searchProductTypes,
                 result: searchProductTypesOpts
               }) => {
@@ -148,6 +157,33 @@ export const ProductUpdate: React.StatelessComponent<
                             onBack={handleBack}
                             onSubmit={handleSubmit}
                             saveButtonBarState={formTransitionState}
+                            fetchMoreCategories={{
+                              hasMore: maybe(
+                                () =>
+                                  searchCategoryOpts.data.search.pageInfo
+                                    .hasNextPage
+                              ),
+                              loading: searchCategoryOpts.loading,
+                              onFetchMore: loadMoreCategories
+                            }}
+                            fetchMoreCollections={{
+                              hasMore: maybe(
+                                () =>
+                                  searchCollectionOpts.data.search.pageInfo
+                                    .hasNextPage
+                              ),
+                              loading: searchCollectionOpts.loading,
+                              onFetchMore: loadMoreCollections
+                            }}
+                            fetchMoreProductTypes={{
+                              hasMore: maybe(
+                                () =>
+                                  searchProductTypesOpts.data.search.pageInfo
+                                    .hasNextPage
+                              ),
+                              loading: searchProductTypesOpts.loading,
+                              onFetchMore: loadMoreProductTypes
+                            }}
                           />
                         </>
                       );