Merge pull request #1287 from mirumee/SALEOR-3617-variant-creator-multiselect-fix

variant creator multiselect fix

src/components/Attributes/AttributeRow.tsx

@@ -73,6 +73,7 @@ interface AttributeRowProps extends AttributeRowHandlers {
   error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment;
   loading: boolean;
   entityId: string;
+  onAttributeSelectBlur?: () => void;
 }
 
 const AttributeRow: React.FC<AttributeRowProps> = ({
@@ -89,7 +90,8 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
   onChange,
   fetchAttributeValues,
   fetchMoreAttributeValues,
-  entityId
+  entityId,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -156,6 +158,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             allowCustomValues={true}
             fetchOnFocus={true}
             fetchChoices={value => fetchAttributeValues(value, attribute.id)}
+            onBlur={onAttributeSelectBlur}
             {...fetchMoreAttributeValues}
           />
         </BasicAttributeRow>
@@ -268,6 +271,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             allowCustomValues={true}
             fetchOnFocus={true}
             fetchChoices={value => fetchAttributeValues(value, attribute.id)}
+            onBlur={onAttributeSelectBlur}
             {...fetchMoreAttributeValues}
           />
         </BasicAttributeRow>

src/components/Attributes/Attributes.stories.tsx

@@ -19,7 +19,8 @@ const props: AttributesProps = {
   onReferencesRemove: () => undefined,
   onReferencesReorder: () => undefined,
   fetchAttributeValues: () => undefined,
-  fetchMoreAttributeValues: fetchMoreProps
+  fetchMoreAttributeValues: fetchMoreProps,
+  onAttributeSelectBlur: () => undefined
 };
 
 storiesOf("Attributes / Attributes", module)

src/components/Attributes/Attributes.tsx

@@ -38,6 +38,7 @@ export interface AttributesProps extends AttributeRowHandlers {
   attributeValues: AttributeValueFragment[];
   fetchAttributeValues: (query: string, attributeId: string) => void;
   fetchMoreAttributeValues: FetchMoreProps;
+  onAttributeSelectBlur: () => void;
   disabled: boolean;
   loading: boolean;
   errors: Array<
@@ -117,6 +118,7 @@ const Attributes: React.FC<AttributesProps> = ({
   attributeValues,
   errors,
   title,
+  onAttributeSelectBlur,
   entityId = "_defaultId",
   ...props
 }) => {
@@ -168,6 +170,7 @@ const Attributes: React.FC<AttributesProps> = ({
                     attribute={attribute}
                     attributeValues={attributeValues}
                     error={error}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                     {...props}
                   />
                 </React.Fragment>

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -89,6 +89,7 @@ export interface MultiAutocompleteSelectFieldProps
   testId?: string;
   fetchChoices?: (value: string) => void;
   onChange: (event: React.ChangeEvent<any>) => void;
+  onBlur?: () => void;
   fetchOnFocus?: boolean;
   endAdornment?: React.ReactNode;
 }
@@ -115,6 +116,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
     testId,
     fetchChoices,
     onChange,
+    onBlur,
     onFetchMore,
     fetchOnFocus,
     endAdornment,
@@ -142,6 +144,14 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
             onInputValueChange={value => debounceFn(value)}
             onSelect={handleSelect}
             itemToString={() => ""}
+            // this is to prevent unwanted state updates when the dropdown is closed with an empty value,
+            // which downshift interprets as the value being updated with an empty string, causing side-effects
+            stateReducer={(state, changes) => {
+              if (changes.isOpen === false && state.inputValue === "") {
+                delete changes.inputValue;
+              }
+              return changes;
+            }}
           >
             {({
               closeMenu,
@@ -175,6 +185,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
                         </div>
                       ),
                       id: undefined,
+                      onBlur,
                       onClick: toggleMenu,
                       onFocus: () => {
                         if (fetchOnFocus) {

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -49,6 +49,7 @@ export interface SingleAutocompleteSelectFieldProps
   fetchOnFocus?: boolean;
   FormHelperTextProps?: ExtendedFormHelperTextProps;
   nakedInput?: boolean;
+  onBlur?: () => void;
 }
 
 const DebounceAutocomplete: React.ComponentType<DebounceProps<
@@ -79,6 +80,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
     fetchOnFocus,
     FormHelperTextProps,
     nakedInput = false,
+    onBlur,
     ...rest
   } = props;
   const classes = useStyles(props);
@@ -101,6 +103,14 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
           onInputValueChange={value => debounceFn(value)}
           onSelect={handleChange}
           selectedItem={value || ""}
+          // this is to prevent unwanted state updates when the dropdown is closed with an empty value,
+          // which downshift interprets as the value being updated with an empty string, causing side-effects
+          stateReducer={(_, changes) => {
+            if (changes.isOpen === false) {
+              delete changes.inputValue;
+            }
+            return changes;
+          }}
         >
           {({
             getInputProps,
@@ -150,6 +160,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
 
             const handleBlur = () => {
               ensureProperValues(true);
+              onBlur();
               closeMenu();
             };
 
@@ -199,6 +210,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
                   FormHelperTextProps={FormHelperTextProps}
                   label={label}
                   fullWidth={true}
+                  onBlur={onBlur}
                 />
                 {isOpen && (!!inputValue || !!choices.length) && (
                   <SingleAutocompleteSelectFieldContent

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -59,6 +59,7 @@ export interface PageDetailsPageProps {
   fetchMoreAttributeValues?: FetchMoreProps;
   onCloseDialog: () => void;
   onSelectPageType?: (pageTypeId: string) => void;
+  onAttributeSelectBlur: () => void;
 }
 
 const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
@@ -85,7 +86,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
   fetchAttributeValues,
   fetchMoreAttributeValues,
   onCloseDialog,
-  onSelectPageType
+  onSelectPageType,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
@@ -189,6 +191,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
                   onReferencesReorder={handlers.reorderAttributeValue}
                   fetchAttributeValues={fetchAttributeValues}
                   fetchMoreAttributeValues={fetchMoreAttributeValues}
+                  onAttributeSelectBlur={onAttributeSelectBlur}
                 />
               )}
               <CardSpacer />

src/pages/views/PageCreate.tsx

@@ -15,7 +15,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import usePageTypeSearch from "@saleor/searches/usePageTypeSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
-import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
+import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
@@ -76,8 +76,9 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
-    result: searchAttributeValuesOpts
+    result: searchAttributeValuesOpts,
-  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
+    reset: searchAttributeReset
+  } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const { data: selectedPageType } = usePageTypeQuery({
     variables: {
@@ -218,6 +219,7 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
               onCloseDialog={() => navigate(pageCreateUrl())}
               selectedPageType={selectedPageType?.pageType}
               onSelectPageType={id => setSelectedPageTypeId(id)}
+              onAttributeSelectBlur={searchAttributeReset}
             />
           </>
         );

src/pages/views/PageDetails.tsx

@@ -26,7 +26,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
-import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
+import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
@@ -176,8 +176,9 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
-    result: searchAttributeValuesOpts
+    result: searchAttributeValuesOpts,
-  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
+    reset: searchAttributeReset
+  } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const attributeValues =
     mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
@@ -237,6 +238,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
         fetchAttributeValues={searchAttributeValues}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(pageUrl(id))}
+        onAttributeSelectBlur={searchAttributeReset}
       />
       <ActionDialog
         open={params.action === "remove"}

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -84,6 +84,7 @@ interface ProductCreatePageProps {
   fetchReferenceProducts?: (data: string) => void;
   fetchMoreReferencePages?: FetchMoreProps;
   fetchMoreReferenceProducts?: FetchMoreProps;
+  onAttributeSelectBlur: () => void;
   onCloseDialog: () => void;
   onSelectProductType: (productTypeId: string) => void;
   onBack?();
@@ -129,7 +130,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   fetchAttributeValues,
   fetchMoreAttributeValues,
   onCloseDialog,
-  onSelectProductType
+  onSelectProductType,
+  onAttributeSelectBlur
 }: ProductCreatePageProps) => {
   const intl = useIntl();
 
@@ -240,6 +242,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                   />
                 )}
                 <CardSpacer />

src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx

@@ -37,6 +37,7 @@ const props: ProductUpdatePageProps = {
   fetchCategories: () => undefined,
   fetchCollections: () => undefined,
   fetchAttributeValues: () => undefined,
+  onAttributeSelectBlur: () => undefined,
   fetchMoreCategories: fetchMoreProps,
   fetchMoreCollections: fetchMoreProps,
   fetchMoreAttributeValues: fetchMoreProps,

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -110,6 +110,7 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps {
   onImageDelete: (id: string) => () => void;
   onSubmit: (data: ProductUpdatePageSubmitData) => SubmitPromise;
   openChannelsModal: () => void;
+  onAttributeSelectBlur: () => void;
   onBack?();
   onDelete();
   onImageEdit?(id: string);
@@ -194,7 +195,8 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   fetchMoreAttributeValues,
   onCloseDialog,
   channelsWithVariantsData,
-  onChannelsChange
+  onChannelsChange,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
 
@@ -317,6 +319,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                   />
                 )}
                 <CardSpacer />

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -85,6 +85,7 @@ interface ProductVariantCreatePageProps {
   fetchMoreReferenceProducts?: FetchMoreProps;
   fetchMoreAttributeValues?: FetchMoreProps;
   onCloseDialog: () => void;
+  onAttributeSelectBlur: () => void;
 }
 
 const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
@@ -112,7 +113,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
   fetchMoreReferencePages,
   fetchMoreReferenceProducts,
   fetchMoreAttributeValues,
-  onCloseDialog
+  onCloseDialog,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
 
@@ -192,6 +194,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 onReferencesReorder={handlers.reorderAttributeValue}
                 fetchAttributeValues={fetchAttributeValues}
                 fetchMoreAttributeValues={fetchMoreAttributeValues}
+                onAttributeSelectBlur={onAttributeSelectBlur}
               />
               <CardSpacer />
               <Attributes
@@ -213,6 +216,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 onReferencesReorder={handlers.reorderAttributeValue}
                 fetchAttributeValues={fetchAttributeValues}
                 fetchMoreAttributeValues={fetchMoreAttributeValues}
+                onAttributeSelectBlur={onAttributeSelectBlur}
               />
               <CardSpacer />
               <ProductShipping

src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx

@@ -109,7 +109,8 @@ const props: ProductVariantCreatorContentProps = {
   errors: [],
   variantsLeft: 6,
   step: ProductVariantCreatorStep.values,
-  warehouses: warehouseList
+  warehouses: warehouseList,
+  onAttributeSelectBlur: () => undefined
 };
 
 storiesOf("Views / Products / Create multiple variants", module)

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx

@@ -29,6 +29,7 @@ export interface ProductVariantCreatorContentProps {
   warehouses: WarehouseFragment[];
   fetchAttributeValues: (query: string, attributeId: string) => void;
   fetchMoreAttributeValues?: FetchMoreProps;
+  onAttributeSelectBlur: () => void;
 }
 
 const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps> = ({
@@ -42,7 +43,8 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
   errors,
   step,
   variantsLeft,
-  warehouses
+  warehouses,
+  onAttributeSelectBlur
 }) => {
   const selectedAttributes = attributes.filter(attribute =>
     isSelected(
@@ -71,6 +73,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
               type: ProductVariantCreateReducerActionType.selectValue
             })
           }
+          onValueBlur={onAttributeSelectBlur}
         />
       )}
       {step === ProductVariantCreatorStep.prices && (

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx

@@ -102,6 +102,7 @@ export interface ProductVariantCreatorValuesProps {
     attributeId: string,
     value: AttributeValue<Partial<AttributeValueFragment>>
   ) => void;
+  onValueBlur: () => void;
 }
 
 const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> = props => {
@@ -112,7 +113,8 @@ const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> =
     fetchMoreAttributeValues,
     data,
     variantsLeft,
-    onValueClick
+    onValueClick,
+    onValueBlur
   } = props;
   const intl = useIntl();
   const variantsNumber = getVariantsNumber(data);
@@ -208,6 +210,7 @@ const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> =
                   fetchChoices={value =>
                     fetchAttributeValues(value, attribute.id)
                   }
+                  onBlur={onValueBlur}
                   {...fetchMoreAttributeValues}
                 />
               )}

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -98,6 +98,7 @@ interface ProductVariantPageProps {
   onAssignReferencesClick: (attribute: AttributeInput) => void;
   onCloseDialog: () => void;
   onVariantReorder: ReorderAction;
+  onAttributeSelectBlur: () => void;
   onAdd();
   onBack();
   onDelete();
@@ -140,7 +141,8 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   fetchMoreReferencePages,
   fetchMoreReferenceProducts,
   fetchMoreAttributeValues,
-  onCloseDialog
+  onCloseDialog,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
 
@@ -246,6 +248,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                   />
                   <CardSpacer />
                   <Attributes
@@ -270,6 +273,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                   />
                   <CardSpacer />
                   <ProductVariantMedia

src/products/views/ProductCreate/ProductCreate.tsx

@@ -35,7 +35,7 @@ import useProductSearch from "@saleor/searches/useProductSearch";
 import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
 import { useTaxTypeList } from "@saleor/taxes/queries";
 import { getProductErrorMessage } from "@saleor/utils/errors";
-import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
+import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -109,8 +109,9 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
-    result: searchAttributeValuesOpts
+    result: searchAttributeValuesOpts,
-  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
+    reset: searchAttributeReset
+  } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
   const warehouses = useWarehouseList({
     displayLoader: true,
     variables: {
@@ -348,6 +349,7 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
         onCloseDialog={() => navigate(productAddUrl())}
         selectedProductType={selectedProductType?.productType}
         onSelectProductType={id => setSelectedProductTypeId(id)}
+        onAttributeSelectBlur={searchAttributeReset}
       />
     </>
   );

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -47,7 +47,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import { getProductErrorMessage } from "@saleor/utils/errors";
-import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
+import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -148,8 +148,9 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
-    result: searchAttributeValuesOpts
+    result: searchAttributeValuesOpts,
-  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
+    reset: searchAttributeReset
+  } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
   const warehouses = useWarehouseList({
     displayLoader: true,
     variables: {
@@ -606,6 +607,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         fetchMoreReferenceProducts={fetchMoreReferenceProducts}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(productUrl(id))}
+        onAttributeSelectBlur={searchAttributeReset}
       />
       <ActionDialog
         open={params.action === "remove"}

src/products/views/ProductVariant.tsx

@@ -25,7 +25,7 @@ import { useProductVariantChannelListingUpdate } from "@saleor/products/mutation
 import { ProductVariantDetails_productVariant } from "@saleor/products/types/ProductVariantDetails";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
-import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
+import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -303,8 +303,9 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
-    result: searchAttributeValuesOpts
+    result: searchAttributeValuesOpts,
-  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
+    reset: searchAttributeReset
+  } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const fetchMoreReferencePages = {
     hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
@@ -376,6 +377,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
         onCloseDialog={() =>
           navigate(productVariantEditUrl(productId, variantId))
         }
+        onAttributeSelectBlur={searchAttributeReset}
       />
       <ProductVariantDeleteDialog
         confirmButtonState={deleteVariantOpts.status}

src/products/views/ProductVariantCreate.tsx

@@ -13,7 +13,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useShop from "@saleor/hooks/useShop";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
-import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
+import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
@@ -171,8 +171,9 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
-    result: searchAttributeValuesOpts
+    result: searchAttributeValuesOpts,
-  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
+    reset: searchAttributeReset
+  } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const fetchMoreReferencePages = {
     hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
@@ -241,6 +242,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
         fetchAttributeValues={searchAttributeValues}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(productVariantAddUrl(productId))}
+        onAttributeSelectBlur={searchAttributeReset}
       />
     </>
   );

src/products/views/ProductVariantCreator/ProductVariantCreator.tsx

@@ -6,7 +6,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import { useProductVariantBulkCreateMutation } from "@saleor/products/mutations";
 import { useCreateMultipleVariantsData } from "@saleor/products/queries";
 import { productUrl } from "@saleor/products/urls";
-import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
+import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -56,8 +56,9 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
+    reset: searchAttributeReset,
     result: searchAttributeValuesOpts
-  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
+  } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const fetchMoreAttributeValues = {
     hasMore: !!searchAttributeValuesOpts.data?.attribute?.choices?.pageInfo
@@ -98,6 +99,7 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
             variables: { id, inputs }
           })
         }
+        onAttributeSelectBlur={searchAttributeReset}
         warehouses={mapEdgesToItems(data?.warehouses) || []}
       />
     </>

src/storybook/stories/pages/PageDetailsPage.tsx

@@ -24,6 +24,7 @@ const props: PageDetailsPageProps = {
   attributeValues: [],
   saveButtonBarState: "default",
   fetchAttributeValues: () => undefined,
+  onAttributeSelectBlur: () => undefined,
   fetchMoreAttributeValues: fetchMoreProps
 };
 

src/storybook/stories/products/ProductCreatePage.tsx

@@ -56,6 +56,7 @@ storiesOf("Views / Products / Create product", module)
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
       onSelectProductType={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("When loading", () => (
@@ -92,6 +93,7 @@ storiesOf("Views / Products / Create product", module)
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
       onSelectProductType={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("form errors", () => (
@@ -143,5 +145,6 @@ storiesOf("Views / Products / Create product", module)
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
       onSelectProductType={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ));

src/storybook/stories/products/ProductUpdatePage.tsx

@@ -48,6 +48,7 @@ const props: ProductUpdatePageProps = {
   fetchCategories: () => undefined,
   fetchCollections: () => undefined,
   fetchAttributeValues: () => undefined,
+  onAttributeSelectBlur: () => undefined,
   fetchMoreCategories: fetchMoreProps,
   fetchMoreCollections: fetchMoreProps,
   fetchMoreAttributeValues: fetchMoreProps,

src/storybook/stories/products/ProductVariantCreatePage.tsx

@@ -40,6 +40,7 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("with errors", () => (
@@ -82,6 +83,7 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("when loading data", () => (
@@ -105,6 +107,7 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("add first variant", () => (
@@ -131,6 +134,7 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("no warehouses", () => (
@@ -154,5 +158,6 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ));

src/storybook/stories/products/ProductVariantPage.tsx

@@ -39,6 +39,7 @@ storiesOf("Views / Products / Product variant details", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("when loading data", () => (
@@ -67,6 +68,7 @@ storiesOf("Views / Products / Product variant details", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("no warehouses", () => (
@@ -94,6 +96,7 @@ storiesOf("Views / Products / Product variant details", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ))
   .add("attribute errors", () => (
@@ -149,5 +152,6 @@ storiesOf("Views / Products / Product variant details", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
+      onAttributeSelectBlur={() => undefined}
     />
   ));

src/utils/handlers/attributeValueSearchHandler.ts

@@ -1,4 +1,8 @@
-import { SearchAttributeValuesVariables } from "@saleor/searches/types/SearchAttributeValues";
+import { UseSearchResult } from "@saleor/hooks/makeSearch";
+import {
+  SearchAttributeValues,
+  SearchAttributeValuesVariables
+} from "@saleor/searches/types/SearchAttributeValues";
 import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 import { useEffect, useState } from "react";
 
@@ -7,9 +11,18 @@ interface AttributeValueSearchHandlerState {
   query: string;
 }
 
-function createAttributeValueSearchHandler(
+export interface UseAttributeValueSearchHandler
+  extends Omit<
+    UseSearchResult<SearchAttributeValues, SearchAttributeValuesVariables>,
+    "search"
+  > {
+  reset: () => void;
+  search: (query: string, id: string | null) => void;
+}
+
+function useAttributeValueSearchHandler(
   variables: SearchAttributeValuesVariables
-) {
+): UseAttributeValueSearchHandler {
   const [state, setState] = useState<AttributeValueSearchHandlerState>({
     id: null,
     query: variables.query
@@ -35,16 +48,25 @@ function createAttributeValueSearchHandler(
     }
   };
 
+  const reset = () => setState(prevState => ({ ...prevState, id: null }));
+
   useEffect(() => {
     if (state.id) {
       search("");
     }
   }, [state.id]);
+
   return {
     loadMore,
     search: handleSearch,
-    result
+    reset,
+    result: state.id
+      ? result
+      : {
+          ...result,
+          data: undefined
+        }
   };
 }
 
-export default createAttributeValueSearchHandler;
+export default useAttributeValueSearchHandler;