From 99aa6365be9dc036c4b5b0dd1cf11a25c1e94a05 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Mon, 14 Jun 2021 14:19:23 +0200
Subject: [PATCH] SALEOR-3513 - Fix attribute values input display (#1156)

* Fix attribute values input display with additional search handler

* Update changelog

* Update attribute value search handler
---
 CHANGELOG.md                                  |   1 +
 src/components/Attributes/AttributeRow.tsx    |  14 +-
 .../Attributes/Attributes.stories.tsx         |   1 -
 src/components/Attributes/Attributes.tsx      |   3 +-
 .../MultiAutocompleteSelectField.tsx          | 155 +++++++++---------
 .../SingleAutocompleteSelectField.tsx         |   8 +-
 .../PageDetailsPage/PageDetailsPage.tsx       |   7 +-
 src/pages/views/PageCreate.tsx                |  14 +-
 src/pages/views/PageDetails.tsx               |  14 +-
 .../ProductCreatePage/ProductCreatePage.tsx   |   7 +-
 .../ProductUpdatePage.test.tsx                |   1 -
 .../ProductUpdatePage/ProductUpdatePage.tsx   |   7 +-
 .../ProductVariantCreatePage.tsx              |   6 +-
 .../ProductVariantCreator.stories.tsx         |   3 +-
 .../ProductVariantCreatorContent.tsx          |   7 +-
 .../ProductVariantCreatorValues.tsx           |  11 +-
 .../ProductVariantPage/ProductVariantPage.tsx |   6 +-
 .../views/ProductCreate/ProductCreate.tsx     |  14 +-
 .../views/ProductUpdate/ProductUpdate.tsx     |  14 +-
 src/products/views/ProductVariant.tsx         |  12 +-
 src/products/views/ProductVariantCreate.tsx   |  14 +-
 .../ProductVariantCreator.tsx                 |  14 +-
 .../stories/pages/PageDetailsPage.tsx         |   3 +-
 .../stories/products/ProductCreatePage.tsx    |   3 -
 .../stories/products/ProductUpdatePage.tsx    |   1 -
 .../products/ProductVariantCreatePage.tsx     |   5 -
 .../stories/products/ProductVariantPage.tsx   |   4 -
 .../handlers/attributeValueSearchHandler.ts   |  51 ++++++
 28 files changed, 180 insertions(+), 220 deletions(-)
 create mode 100644 src/utils/handlers/attributeValueSearchHandler.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf5fd0269..948968059 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Choosing user shipping and billing addresses for draft order - #1082 by @orzechdev
 - Fix EditorJS inline formatting - #1096 by @orzechdev
 - Add pagination on attribute values - #1112 by @orzechdev
+- Fix attribute values input display - #1156 by @orzechdev
 
 # 2.11.1
 
diff --git a/src/components/Attributes/AttributeRow.tsx b/src/components/Attributes/AttributeRow.tsx
index bc124a401..1b0884287 100644
--- a/src/components/Attributes/AttributeRow.tsx
+++ b/src/components/Attributes/AttributeRow.tsx
@@ -55,9 +55,8 @@ export interface AttributeRowHandlers {
   onReferencesAddClick: (attribute: AttributeInput) => void;
   onReferencesRemove: FormsetChange<string[]>;
   onReferencesReorder: FormsetChange<ReorderEvent>;
-  fetchAttributeValues: (query: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   fetchMoreAttributeValues: FetchMoreProps;
-  onAttributeFocus: (id: string) => void;
 }
 
 interface AttributeRowProps extends AttributeRowHandlers {
@@ -81,8 +80,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
   onReferencesReorder,
   onChange,
   fetchAttributeValues,
-  fetchMoreAttributeValues,
-  onAttributeFocus
+  fetchMoreAttributeValues
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -147,9 +145,9 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             value={attribute.value[0]}
             onChange={event => onChange(attribute.id, event.target.value)}
             allowCustomValues={true}
-            fetchChoices={fetchAttributeValues}
+            fetchOnFocus={true}
+            fetchChoices={value => fetchAttributeValues(value, attribute.id)}
             {...fetchMoreAttributeValues}
-            onFocus={() => onAttributeFocus(attribute.id)}
           />
         </BasicAttributeRow>
       );
@@ -209,9 +207,9 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             value={attribute.value}
             onChange={event => onMultiChange(attribute.id, event.target.value)}
             allowCustomValues={true}
-            fetchChoices={fetchAttributeValues}
+            fetchOnFocus={true}
+            fetchChoices={value => fetchAttributeValues(value, attribute.id)}
             {...fetchMoreAttributeValues}
-            onFocus={() => onAttributeFocus(attribute.id)}
           />
         </BasicAttributeRow>
       );
diff --git a/src/components/Attributes/Attributes.stories.tsx b/src/components/Attributes/Attributes.stories.tsx
index e77a52bd3..c068a8dcb 100644
--- a/src/components/Attributes/Attributes.stories.tsx
+++ b/src/components/Attributes/Attributes.stories.tsx
@@ -18,7 +18,6 @@ const props: AttributesProps = {
   onReferencesAddClick: () => undefined,
   onReferencesRemove: () => undefined,
   onReferencesReorder: () => undefined,
-  onAttributeFocus: () => undefined,
   fetchAttributeValues: () => undefined,
   fetchMoreAttributeValues: fetchMoreProps
 };
diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx
index 05f448059..e94b497aa 100644
--- a/src/components/Attributes/Attributes.tsx
+++ b/src/components/Attributes/Attributes.tsx
@@ -36,7 +36,7 @@ export type AttributeFileInput = FormsetAtomicData<AttributeInputData, File[]>;
 export interface AttributesProps extends AttributeRowHandlers {
   attributes: AttributeInput[];
   attributeValues: AttributeValueFragment[];
-  fetchAttributeValues: (query: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   fetchMoreAttributeValues: FetchMoreProps;
   disabled: boolean;
   loading: boolean;
@@ -44,7 +44,6 @@ export interface AttributesProps extends AttributeRowHandlers {
     ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment
   >;
   title?: React.ReactNode;
-  onAttributeFocus: (id: string) => void;
 }
 
 const useStyles = makeStyles(
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
index 69c101406..5f165c2e1 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
@@ -85,7 +85,7 @@ export interface MultiAutocompleteSelectFieldProps
   testId?: string;
   fetchChoices?: (value: string) => void;
   onChange: (event: React.ChangeEvent<any>) => void;
-  onFocus?: () => void;
+  fetchOnFocus?: boolean;
 }
 
 const DebounceAutocomplete: React.ComponentType<DebounceProps<
@@ -110,8 +110,8 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
     testId,
     fetchChoices,
     onChange,
-    onFocus,
     onFetchMore,
+    fetchOnFocus,
     ...rest
   } = props;
   const classes = useStyles(props);
@@ -130,82 +130,87 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
 
   return (
     <>
-      <Downshift
-        onInputValueChange={fetchChoices}
-        onSelect={handleSelect}
-        itemToString={() => ""}
-      >
-        {({
-          closeMenu,
-          getInputProps,
-          getItemProps,
-          isOpen,
-          toggleMenu,
-          highlightedIndex,
-          inputValue
-        }) => {
-          const displayCustomValue =
-            inputValue &&
-            inputValue.length > 0 &&
-            allowCustomValues &&
-            !choices.find(
-              choice => choice.label.toLowerCase() === inputValue.toLowerCase()
-            );
+      <DebounceAutocomplete debounceFn={fetchChoices}>
+        {debounceFn => (
+          <Downshift
+            onInputValueChange={value => debounceFn(value)}
+            onSelect={handleSelect}
+            itemToString={() => ""}
+          >
+            {({
+              closeMenu,
+              getInputProps,
+              getItemProps,
+              isOpen,
+              toggleMenu,
+              highlightedIndex,
+              inputValue
+            }) => {
+              const displayCustomValue =
+                inputValue &&
+                inputValue.length > 0 &&
+                allowCustomValues &&
+                !choices.find(
+                  choice =>
+                    choice.label.toLowerCase() === inputValue.toLowerCase()
+                );
 
-          return (
-            <div className={classes.container} {...rest}>
-              <TextField
-                InputProps={{
-                  ...getInputProps({
-                    placeholder
-                  }),
-                  endAdornment: (
-                    <div>
-                      <ArrowDropdownIcon onClick={() => toggleMenu()} />
-                    </div>
-                  ),
-                  id: undefined,
-                  onClick: toggleMenu,
-                  onFocus: () => {
-                    if (onFocus) {
-                      onFocus();
-                    }
-                  }
-                }}
-                error={error}
-                helperText={helperText}
-                label={label}
-                fullWidth={true}
-                disabled={disabled}
-              />
-              {isOpen && (!!inputValue || !!choices.length) && (
-                <MultiAutocompleteSelectFieldContent
-                  add={
-                    add && {
-                      ...add,
-                      onClick: () => {
-                        add.onClick();
-                        closeMenu();
+              return (
+                <div className={classes.container} {...rest}>
+                  <TextField
+                    InputProps={{
+                      ...getInputProps({
+                        placeholder
+                      }),
+                      endAdornment: (
+                        <div>
+                          <ArrowDropdownIcon onClick={() => toggleMenu()} />
+                        </div>
+                      ),
+                      id: undefined,
+                      onClick: toggleMenu,
+                      onFocus: () => {
+                        if (fetchOnFocus) {
+                          fetchChoices(inputValue);
+                        }
                       }
-                    }
-                  }
-                  choices={choices.filter(
-                    choice => !value.includes(choice.value)
+                    }}
+                    error={error}
+                    helperText={helperText}
+                    label={label}
+                    fullWidth={true}
+                    disabled={disabled}
+                  />
+                  {isOpen && (!!inputValue || !!choices.length) && (
+                    <MultiAutocompleteSelectFieldContent
+                      add={
+                        add && {
+                          ...add,
+                          onClick: () => {
+                            add.onClick();
+                            closeMenu();
+                          }
+                        }
+                      }
+                      choices={choices.filter(
+                        choice => !value.includes(choice.value)
+                      )}
+                      displayCustomValue={displayCustomValue}
+                      displayValues={displayValues}
+                      getItemProps={getItemProps}
+                      hasMore={hasMore}
+                      highlightedIndex={highlightedIndex}
+                      loading={loading}
+                      inputValue={inputValue}
+                      onFetchMore={onFetchMore}
+                    />
                   )}
-                  displayCustomValue={displayCustomValue}
-                  displayValues={displayValues}
-                  getItemProps={getItemProps}
-                  hasMore={hasMore}
-                  highlightedIndex={highlightedIndex}
-                  loading={loading}
-                  inputValue={inputValue}
-                  onFetchMore={onFetchMore}
-                />
-              )}
-            </div>
-          );
-        }}
-      </Downshift>
+                </div>
+              );
+            }}
+          </Downshift>
+        )}
+      </DebounceAutocomplete>
       <div className={classes.chipContainer}>
         {displayValues.map(value => (
           <div className={classes.chip} key={value.value}>
diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
index 9daac63ef..00664421b 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
@@ -46,7 +46,7 @@ export interface SingleAutocompleteSelectFieldProps
   InputProps?: InputProps;
   fetchChoices?: (value: string) => void;
   onChange: (event: React.ChangeEvent<any>) => void;
-  onFocus?: () => void;
+  fetchOnFocus?: boolean;
   FormHelperTextProps?: ExtendedFormHelperTextProps;
   nakedInput?: boolean;
 }
@@ -76,7 +76,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
     fetchChoices,
     onChange,
     onFetchMore,
-    onFocus,
+    fetchOnFocus,
     FormHelperTextProps,
     nakedInput = false,
     ...rest
@@ -170,8 +170,8 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
               onBlur: handleBlur,
               onClick: toggleMenu,
               onFocus: () => {
-                if (onFocus) {
-                  onFocus();
+                if (fetchOnFocus) {
+                  fetchChoices(inputValue);
                 }
               }
             };
diff --git a/src/pages/components/PageDetailsPage/PageDetailsPage.tsx b/src/pages/components/PageDetailsPage/PageDetailsPage.tsx
index dfe417b4a..c8c5b04fd 100644
--- a/src/pages/components/PageDetailsPage/PageDetailsPage.tsx
+++ b/src/pages/components/PageDetailsPage/PageDetailsPage.tsx
@@ -55,11 +55,10 @@ export interface PageDetailsPageProps {
   fetchMoreReferencePages?: FetchMoreProps;
   fetchReferenceProducts?: (data: string) => void;
   fetchMoreReferenceProducts?: FetchMoreProps;
-  fetchAttributeValues: (query: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   fetchMoreAttributeValues?: FetchMoreProps;
   onCloseDialog: () => void;
   onSelectPageType?: (pageTypeId: string) => void;
-  onAttributeFocus: (id: string) => void;
 }
 
 const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
@@ -86,8 +85,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
   fetchAttributeValues,
   fetchMoreAttributeValues,
   onCloseDialog,
-  onSelectPageType,
-  onAttributeFocus
+  onSelectPageType
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
@@ -191,7 +189,6 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
                   onReferencesReorder={handlers.reorderAttributeValue}
                   fetchAttributeValues={fetchAttributeValues}
                   fetchMoreAttributeValues={fetchMoreAttributeValues}
-                  onAttributeFocus={onAttributeFocus}
                 />
               )}
               <CardSpacer />
diff --git a/src/pages/views/PageCreate.tsx b/src/pages/views/PageCreate.tsx
index 92f6f5873..096359aac 100644
--- a/src/pages/views/PageCreate.tsx
+++ b/src/pages/views/PageCreate.tsx
@@ -12,10 +12,10 @@ import {
 import { useFileUploadMutation } from "@saleor/files/mutations";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 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 createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
@@ -23,7 +23,7 @@ import {
   usePrivateMetadataUpdate
 } from "@saleor/utils/metadata/updateMetadata";
 import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc";
-import React, { useState } from "react";
+import React from "react";
 import { useIntl } from "react-intl";
 
 import PageDetailsPage from "../components/PageDetailsPage";
@@ -73,18 +73,11 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
   } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-  const [focusedAttribute, setFocusedAttribute] = useState<string>();
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
     result: searchAttributeValuesOpts
-  } = useAttributeValueSearch({
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const { data: selectedPageType } = usePageTypeQuery({
     variables: {
@@ -222,7 +215,6 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
               onCloseDialog={() => navigate(pageCreateUrl())}
               selectedPageType={selectedPageType?.pageType}
               onSelectPageType={id => setSelectedPageTypeId(id)}
-              onAttributeFocus={setFocusedAttribute}
             />
           </>
         );
diff --git a/src/pages/views/PageDetails.tsx b/src/pages/views/PageDetails.tsx
index 645fdbd21..1d117bbf6 100644
--- a/src/pages/views/PageDetails.tsx
+++ b/src/pages/views/PageDetails.tsx
@@ -24,9 +24,9 @@ import { UploadErrorFragment } from "@saleor/fragments/types/UploadErrorFragment
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
-import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
@@ -34,7 +34,7 @@ import {
   usePrivateMetadataUpdate
 } from "@saleor/utils/metadata/updateMetadata";
 import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc";
-import React, { useState } from "react";
+import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { getStringOrPlaceholder, maybe } from "../../misc";
@@ -173,18 +173,11 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
   } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-  const [focusedAttribute, setFocusedAttribute] = useState<string>();
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
     result: searchAttributeValuesOpts
-  } = useAttributeValueSearch({
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const attributeValues = mapEdgesToItems(
     searchAttributeValuesOpts?.data?.attribute.choices
@@ -243,7 +236,6 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
         fetchAttributeValues={searchAttributeValues}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(pageUrl(id))}
-        onAttributeFocus={setFocusedAttribute}
       />
       <ActionDialog
         open={params.action === "remove"}
diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
index 2454b1a21..2501a3550 100644
--- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx
+++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
@@ -74,8 +74,7 @@ interface ProductCreatePageProps {
   fetchCategories: (data: string) => void;
   fetchCollections: (data: string) => void;
   fetchProductTypes: (data: string) => void;
-  fetchAttributeValues: (query: string) => void;
-  onAttributeFocus: (id: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   onWarehouseConfigure: () => void;
   openChannelsModal: () => void;
   onChannelsChange: (data: ChannelData[]) => void;
@@ -130,8 +129,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   fetchAttributeValues,
   fetchMoreAttributeValues,
   onCloseDialog,
-  onSelectProductType,
-  onAttributeFocus
+  onSelectProductType
 }: ProductCreatePageProps) => {
   const intl = useIntl();
 
@@ -242,7 +240,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
-                    onAttributeFocus={onAttributeFocus}
                   />
                 )}
                 <CardSpacer />
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
index aa02d07da..24bbb6971 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
@@ -60,7 +60,6 @@ const props: ProductUpdatePageProps = {
   onVariantsAdd: () => undefined,
   onWarehouseConfigure: () => undefined,
   openChannelsModal: () => undefined,
-  onAttributeFocus: () => undefined,
   placeholderImage,
   product,
   referencePages: [],
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
index a78845504..c7bc1ec69 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
@@ -101,8 +101,7 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps {
   fetchCollections: (query: string) => void;
   fetchReferencePages?: (data: string) => void;
   fetchReferenceProducts?: (data: string) => void;
-  fetchAttributeValues: (query: string) => void;
-  onAttributeFocus: (id: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   onAssignReferencesClick: (attribute: AttributeInput) => void;
   onCloseDialog: () => void;
   onVariantsAdd: () => void;
@@ -195,8 +194,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   fetchMoreAttributeValues,
   onCloseDialog,
   channelsWithVariantsData,
-  onChannelsChange,
-  onAttributeFocus
+  onChannelsChange
 }) => {
   const intl = useIntl();
 
@@ -319,7 +317,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
-                    onAttributeFocus={onAttributeFocus}
                   />
                 )}
                 <CardSpacer />
diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
index 1f4989fe7..b1b9e1342 100644
--- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
+++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
@@ -78,10 +78,9 @@ interface ProductVariantCreatePageProps {
   onWarehouseConfigure: () => void;
   assignReferencesAttributeId?: string;
   onAssignReferencesClick: (attribute: AttributeInput) => void;
-  onAttributeFocus: (id: string) => void;
   fetchReferencePages?: (data: string) => void;
   fetchReferenceProducts?: (data: string) => void;
-  fetchAttributeValues: (query: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   fetchMoreReferencePages?: FetchMoreProps;
   fetchMoreReferenceProducts?: FetchMoreProps;
   fetchMoreAttributeValues?: FetchMoreProps;
@@ -105,7 +104,6 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
   onVariantClick,
   onVariantReorder,
   onWarehouseConfigure,
-  onAttributeFocus,
   assignReferencesAttributeId,
   onAssignReferencesClick,
   fetchReferencePages,
@@ -194,7 +192,6 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 onReferencesReorder={handlers.reorderAttributeValue}
                 fetchAttributeValues={fetchAttributeValues}
                 fetchMoreAttributeValues={fetchMoreAttributeValues}
-                onAttributeFocus={onAttributeFocus}
               />
               <CardSpacer />
               <Attributes
@@ -216,7 +213,6 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 onReferencesReorder={handlers.reorderAttributeValue}
                 fetchAttributeValues={fetchAttributeValues}
                 fetchMoreAttributeValues={fetchMoreAttributeValues}
-                onAttributeFocus={onAttributeFocus}
               />
               <CardSpacer />
               <ProductShipping
diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx
index a9267fc8d..1dd349667 100644
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx
@@ -109,8 +109,7 @@ const props: ProductVariantCreatorContentProps = {
   errors: [],
   variantsLeft: 6,
   step: ProductVariantCreatorStep.values,
-  warehouses: warehouseList,
-  onAttributeFocus: () => undefined
+  warehouses: warehouseList
 };
 
 storiesOf("Views / Products / Create multiple variants", module)
diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
index 758699c84..99144349c 100644
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
@@ -27,9 +27,8 @@ export interface ProductVariantCreatorContentProps {
   step: ProductVariantCreatorStep;
   variantsLeft: number | null;
   warehouses: WarehouseFragment[];
-  fetchAttributeValues: (query: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   fetchMoreAttributeValues?: FetchMoreProps;
-  onAttributeFocus: (id: string) => void;
 }
 
 const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps> = ({
@@ -43,8 +42,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
   errors,
   step,
   variantsLeft,
-  warehouses,
-  onAttributeFocus
+  warehouses
 }) => {
   const selectedAttributes = attributes.filter(attribute =>
     isSelected(
@@ -73,7 +71,6 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
               type: ProductVariantCreateReducerActionType.selectValue
             })
           }
-          onAttributeFocus={onAttributeFocus}
         />
       )}
       {step === ProductVariantCreatorStep.prices && (
diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx
index 18c87d568..d10a3100d 100644
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx
@@ -55,7 +55,7 @@ export function getMultiDisplayValues(
 export interface ProductVariantCreatorValuesProps {
   attributes: ProductDetails_product_productType_variantAttributes[];
   attributeValues: SearchAttributeValues_attribute_choices_edges_node[];
-  fetchAttributeValues: (query: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   fetchMoreAttributeValues?: FetchMoreProps;
   data: ProductVariantCreateFormData;
   variantsLeft: number | null;
@@ -63,7 +63,6 @@ export interface ProductVariantCreatorValuesProps {
     attributeId: string,
     value: AttributeValue<AttributeValueFragment>
   ) => void;
-  onAttributeFocus: (id: string) => void;
 }
 
 const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> = props => {
@@ -74,8 +73,7 @@ const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> =
     fetchMoreAttributeValues,
     data,
     variantsLeft,
-    onValueClick,
-    onAttributeFocus
+    onValueClick
   } = props;
   const intl = useIntl();
   const variantsNumber = getVariantsNumber(data);
@@ -128,9 +126,10 @@ const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> =
                   handleValueClick(attribute.id, event.target.value)
                 }
                 allowCustomValues={true}
-                fetchChoices={fetchAttributeValues}
+                fetchChoices={value =>
+                  fetchAttributeValues(value, attribute.id)
+                }
                 {...fetchMoreAttributeValues}
-                onFocus={() => onAttributeFocus(attribute.id)}
               />
             </CardContent>
           </Card>
diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
index 12d6396d6..1c7b5e6cb 100644
--- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx
+++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
@@ -94,9 +94,8 @@ interface ProductVariantPageProps {
   fetchMoreAttributeValues?: FetchMoreProps;
   fetchReferencePages?: (data: string) => void;
   fetchReferenceProducts?: (data: string) => void;
-  fetchAttributeValues: (query: string) => void;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
   onAssignReferencesClick: (attribute: AttributeInput) => void;
-  onAttributeFocus: (id: string) => void;
   onCloseDialog: () => void;
   onVariantReorder: ReorderAction;
   onAdd();
@@ -133,7 +132,6 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   onVariantReorder,
   onSetDefaultVariant,
   onWarehouseConfigure,
-  onAttributeFocus,
   assignReferencesAttributeId,
   onAssignReferencesClick,
   fetchReferencePages,
@@ -247,7 +245,6 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
-                    onAttributeFocus={onAttributeFocus}
                   />
                   <CardSpacer />
                   <Attributes
@@ -271,7 +268,6 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
-                    onAttributeFocus={onAttributeFocus}
                   />
                   <CardSpacer />
                   <ProductVariantMedia
diff --git a/src/products/views/ProductCreate/ProductCreate.tsx b/src/products/views/ProductCreate/ProductCreate.tsx
index 89de5555a..c65adbdbc 100644
--- a/src/products/views/ProductCreate/ProductCreate.tsx
+++ b/src/products/views/ProductCreate/ProductCreate.tsx
@@ -28,7 +28,6 @@ import {
   productListUrl,
   productUrl
 } from "@saleor/products/urls";
-import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
@@ -36,6 +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 createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -45,7 +45,7 @@ import {
 } from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import { warehouseAddPath } from "@saleor/warehouses/urls";
-import React, { useState } from "react";
+import React from "react";
 import { useIntl } from "react-intl";
 
 import { createHandler } from "./handlers";
@@ -106,18 +106,11 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
   } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-  const [focusedAttribute, setFocusedAttribute] = useState<string>();
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
     result: searchAttributeValuesOpts
-  } = useAttributeValueSearch({
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
   const warehouses = useWarehouseList({
     displayLoader: true,
     variables: {
@@ -351,7 +344,6 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
         onCloseDialog={() => navigate(productAddUrl())}
         selectedProductType={selectedProductType?.productType}
         onSelectProductType={id => setSelectedProductTypeId(id)}
-        onAttributeFocus={setFocusedAttribute}
       />
     </>
   );
diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx
index d7118c011..254e68f78 100644
--- a/src/products/views/ProductUpdate/ProductUpdate.tsx
+++ b/src/products/views/ProductUpdate/ProductUpdate.tsx
@@ -41,12 +41,12 @@ import {
   useSimpleProductUpdateMutation,
   useVariantCreateMutation
 } from "@saleor/products/mutations";
-import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 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 createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -56,7 +56,7 @@ import {
 } from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import { warehouseAddPath } from "@saleor/warehouses/urls";
-import React, { useState } from "react";
+import React from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
 import { getMutationState } from "../../../misc";
@@ -144,18 +144,11 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
   } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-  const [focusedAttribute, setFocusedAttribute] = useState<string>();
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
     result: searchAttributeValuesOpts
-  } = useAttributeValueSearch({
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
   const warehouses = useWarehouseList({
     displayLoader: true,
     variables: {
@@ -608,7 +601,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         fetchMoreReferenceProducts={fetchMoreReferenceProducts}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(productUrl(id))}
-        onAttributeFocus={setFocusedAttribute}
       />
       <ActionDialog
         open={params.action === "remove"}
diff --git a/src/products/views/ProductVariant.tsx b/src/products/views/ProductVariant.tsx
index aeb9d8903..713c0dfaf 100644
--- a/src/products/views/ProductVariant.tsx
+++ b/src/products/views/ProductVariant.tsx
@@ -23,9 +23,9 @@ import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
 import { useProductVariantChannelListingUpdate } from "@saleor/products/mutations";
 import { ProductVariantDetails_productVariant } from "@saleor/products/types/ProductVariantDetails";
-import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import createAttributeValueSearchHandler 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";
@@ -300,18 +300,11 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
   } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-  const [focusedAttribute, setFocusedAttribute] = useState<string>();
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
     result: searchAttributeValuesOpts
-  } = useAttributeValueSearch({
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const fetchMoreReferencePages = {
     hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
@@ -382,7 +375,6 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
         onCloseDialog={() =>
           navigate(productVariantEditUrl(productId, variantId))
         }
-        onAttributeFocus={setFocusedAttribute}
       />
       <ProductVariantDeleteDialog
         confirmButtonState={deleteVariantOpts.status}
diff --git a/src/products/views/ProductVariantCreate.tsx b/src/products/views/ProductVariantCreate.tsx
index b78f95d41..3dbb21671 100644
--- a/src/products/views/ProductVariantCreate.tsx
+++ b/src/products/views/ProductVariantCreate.tsx
@@ -11,9 +11,9 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import { useFileUploadMutation } from "@saleor/files/mutations";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useShop from "@saleor/hooks/useShop";
-import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import {
@@ -22,7 +22,7 @@ import {
 } from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import { warehouseAddPath } from "@saleor/warehouses/urls";
-import React, { useState } from "react";
+import React from "react";
 import { useIntl } from "react-intl";
 
 import { weight } from "../../misc";
@@ -168,18 +168,11 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
   } = useProductSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
-  const [focusedAttribute, setFocusedAttribute] = useState<string>();
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
     result: searchAttributeValuesOpts
-  } = useAttributeValueSearch({
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const fetchMoreReferencePages = {
     hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
@@ -247,7 +240,6 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
         fetchAttributeValues={searchAttributeValues}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(productVariantAddUrl(productId))}
-        onAttributeFocus={setFocusedAttribute}
       />
     </>
   );
diff --git a/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx b/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx
index 4e5f801d1..6fa518998 100644
--- a/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx
+++ b/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx
@@ -6,9 +6,9 @@ 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 useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
+import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
-import React, { useState } from "react";
+import React from "react";
 import { useIntl } from "react-intl";
 
 import ProductVariantCreatorPage from "../../components/ProductVariantCreatorPage";
@@ -53,18 +53,11 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
     }
   });
 
-  const [focusedAttribute, setFocusedAttribute] = useState<string>();
   const {
     loadMore: loadMoreAttributeValues,
     search: searchAttributeValues,
     result: searchAttributeValuesOpts
-  } = useAttributeValueSearch({
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
   const fetchMoreAttributeValues = {
     hasMore: !!searchAttributeValuesOpts.data?.attribute?.choices?.pageInfo
@@ -107,7 +100,6 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
           })
         }
         warehouses={mapEdgesToItems(data?.warehouses)}
-        onAttributeFocus={setFocusedAttribute}
       />
     </>
   );
diff --git a/src/storybook/stories/pages/PageDetailsPage.tsx b/src/storybook/stories/pages/PageDetailsPage.tsx
index 3f11240f0..872001e8c 100644
--- a/src/storybook/stories/pages/PageDetailsPage.tsx
+++ b/src/storybook/stories/pages/PageDetailsPage.tsx
@@ -24,8 +24,7 @@ const props: PageDetailsPageProps = {
   attributeValues: [],
   saveButtonBarState: "default",
   fetchAttributeValues: () => undefined,
-  fetchMoreAttributeValues: fetchMoreProps,
-  onAttributeFocus: () => undefined
+  fetchMoreAttributeValues: fetchMoreProps
 };
 
 storiesOf("Views / Pages / Page details", module)
diff --git a/src/storybook/stories/products/ProductCreatePage.tsx b/src/storybook/stories/products/ProductCreatePage.tsx
index 300729d23..0fbfd1164 100644
--- a/src/storybook/stories/products/ProductCreatePage.tsx
+++ b/src/storybook/stories/products/ProductCreatePage.tsx
@@ -56,7 +56,6 @@ storiesOf("Views / Products / Create product", module)
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
       onSelectProductType={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("When loading", () => (
@@ -93,7 +92,6 @@ storiesOf("Views / Products / Create product", module)
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
       onSelectProductType={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("form errors", () => (
@@ -145,6 +143,5 @@ storiesOf("Views / Products / Create product", module)
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
       onSelectProductType={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ));
diff --git a/src/storybook/stories/products/ProductUpdatePage.tsx b/src/storybook/stories/products/ProductUpdatePage.tsx
index e828cea9b..cba459eed 100644
--- a/src/storybook/stories/products/ProductUpdatePage.tsx
+++ b/src/storybook/stories/products/ProductUpdatePage.tsx
@@ -70,7 +70,6 @@ const props: ProductUpdatePageProps = {
   onVariantsAdd: () => undefined,
   onWarehouseConfigure: () => undefined,
   openChannelsModal: () => undefined,
-  onAttributeFocus: () => undefined,
   placeholderImage,
   product,
   referencePages: [],
diff --git a/src/storybook/stories/products/ProductVariantCreatePage.tsx b/src/storybook/stories/products/ProductVariantCreatePage.tsx
index b32542b73..fb89957eb 100644
--- a/src/storybook/stories/products/ProductVariantCreatePage.tsx
+++ b/src/storybook/stories/products/ProductVariantCreatePage.tsx
@@ -40,7 +40,6 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("with errors", () => (
@@ -83,7 +82,6 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("when loading data", () => (
@@ -107,7 +105,6 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("add first variant", () => (
@@ -134,7 +131,6 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("no warehouses", () => (
@@ -158,6 +154,5 @@ storiesOf("Views / Products / Create product variant", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ));
diff --git a/src/storybook/stories/products/ProductVariantPage.tsx b/src/storybook/stories/products/ProductVariantPage.tsx
index b0ba9ea8a..c994379ca 100644
--- a/src/storybook/stories/products/ProductVariantPage.tsx
+++ b/src/storybook/stories/products/ProductVariantPage.tsx
@@ -39,7 +39,6 @@ storiesOf("Views / Products / Product variant details", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("when loading data", () => (
@@ -68,7 +67,6 @@ storiesOf("Views / Products / Product variant details", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("no warehouses", () => (
@@ -96,7 +94,6 @@ storiesOf("Views / Products / Product variant details", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ))
   .add("attribute errors", () => (
@@ -152,6 +149,5 @@ storiesOf("Views / Products / Product variant details", module)
       fetchAttributeValues={() => undefined}
       onAssignReferencesClick={() => undefined}
       onCloseDialog={() => undefined}
-      onAttributeFocus={() => undefined}
     />
   ));
diff --git a/src/utils/handlers/attributeValueSearchHandler.ts b/src/utils/handlers/attributeValueSearchHandler.ts
new file mode 100644
index 000000000..c1a303977
--- /dev/null
+++ b/src/utils/handlers/attributeValueSearchHandler.ts
@@ -0,0 +1,51 @@
+import { SearchAttributeValuesVariables } from "@saleor/searches/types/SearchAttributeValues";
+import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
+import { useEffect, useState } from "react";
+
+interface AttributeValueSearchHandlerState {
+  id: string | null;
+  query: string;
+}
+
+function createAttributeValueSearchHandler(
+  variables: SearchAttributeValuesVariables
+) {
+  const [state, setState] = useState<AttributeValueSearchHandlerState>({
+    id: null,
+    query: variables.query
+  });
+
+  const { loadMore, search, result } = useAttributeValueSearch({
+    variables: {
+      ...variables,
+      ...state
+    },
+    skip: !state.id
+  });
+
+  const handleSearch = (query: string, id: string | null) => {
+    if (query !== state.query) {
+      search(query);
+    }
+    if (id !== state.id || query !== state.query) {
+      setState({
+        query,
+        id
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (state.id) {
+      search("");
+    }
+  }, [state.id]);
+
+  return {
+    loadMore,
+    search: handleSearch,
+    result
+  };
+}
+
+export default createAttributeValueSearchHandler;