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

@@ -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
 

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,
+  fetchMoreAttributeValues
-  onAttributeFocus
 }) => {
   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>
       );

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
 };

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(

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
+      <DebounceAutocomplete debounceFn={fetchChoices}>
-        onInputValueChange={fetchChoices}
+        {debounceFn => (
-        onSelect={handleSelect}
+          <Downshift
-        itemToString={() => ""}
+            onInputValueChange={value => debounceFn(value)}
-      >
+            onSelect={handleSelect}
-        {({
+            itemToString={() => ""}
-          closeMenu,
+          >
-          getInputProps,
+            {({
-          getItemProps,
+              closeMenu,
-          isOpen,
+              getInputProps,
-          toggleMenu,
+              getItemProps,
-          highlightedIndex,
+              isOpen,
-          inputValue
+              toggleMenu,
-        }) => {
+              highlightedIndex,
-          const displayCustomValue =
+              inputValue
-            inputValue &&
+            }) => {
-            inputValue.length > 0 &&
+              const displayCustomValue =
-            allowCustomValues &&
+                inputValue &&
-            !choices.find(
+                inputValue.length > 0 &&
-              choice => choice.label.toLowerCase() === inputValue.toLowerCase()
+                allowCustomValues &&
-            );
+                !choices.find(
+                  choice =>
+                    choice.label.toLowerCase() === inputValue.toLowerCase()
+                );
 
-          return (
+              return (
-            <div className={classes.container} {...rest}>
+                <div className={classes.container} {...rest}>
-              <TextField
+                  <TextField
-                InputProps={{
+                    InputProps={{
-                  ...getInputProps({
+                      ...getInputProps({
-                    placeholder
+                        placeholder
-                  }),
+                      }),
-                  endAdornment: (
+                      endAdornment: (
-                    <div>
+                        <div>
-                      <ArrowDropdownIcon onClick={() => toggleMenu()} />
+                          <ArrowDropdownIcon onClick={() => toggleMenu()} />
-                    </div>
+                        </div>
-                  ),
+                      ),
-                  id: undefined,
+                      id: undefined,
-                  onClick: toggleMenu,
+                      onClick: toggleMenu,
-                  onFocus: () => {
+                      onFocus: () => {
-                    if (onFocus) {
+                        if (fetchOnFocus) {
-                      onFocus();
+                          fetchChoices(inputValue);
-                    }
+                        }
-                  }
-                }}
-                error={error}
-                helperText={helperText}
-                label={label}
-                fullWidth={true}
-                disabled={disabled}
-              />
-              {isOpen && (!!inputValue || !!choices.length) && (
-                <MultiAutocompleteSelectFieldContent
-                  add={
-                    add && {
-                      ...add,
-                      onClick: () => {
-                        add.onClick();
-                        closeMenu();
                       }
-                    }
+                    }}
-                  }
+                    error={error}
-                  choices={choices.filter(
+                    helperText={helperText}
-                    choice => !value.includes(choice.value)
+                    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}
+                </div>
-                  displayValues={displayValues}
+              );
-                  getItemProps={getItemProps}
+            }}
-                  hasMore={hasMore}
+          </Downshift>
-                  highlightedIndex={highlightedIndex}
+        )}
-                  loading={loading}
+      </DebounceAutocomplete>
-                  inputValue={inputValue}
-                  onFetchMore={onFetchMore}
-                />
-              )}
-            </div>
-          );
-        }}
-      </Downshift>
       <div className={classes.chipContainer}>
         {displayValues.map(value => (
           <div className={classes.chip} key={value.value}>

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) {
+                if (fetchOnFocus) {
-                  onFocus();
+                  fetchChoices(inputValue);
                 }
               }
             };

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,
+  onSelectPageType
-  onAttributeFocus
 }) => {
   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 />

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({
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
 
   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}
             />
           </>
         );

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({
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
 
   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"}

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;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
-  onAttributeFocus: (id: string) => void;
   onWarehouseConfigure: () => void;
   openChannelsModal: () => void;
   onChannelsChange: (data: ChannelData[]) => void;
@@ -130,8 +129,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   fetchAttributeValues,
   fetchMoreAttributeValues,
   onCloseDialog,
-  onSelectProductType,
+  onSelectProductType
-  onAttributeFocus
 }: ProductCreatePageProps) => {
   const intl = useIntl();
 
@@ -242,7 +240,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
-                    onAttributeFocus={onAttributeFocus}
                   />
                 )}
                 <CardSpacer />

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: [],

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;
+  fetchAttributeValues: (query: string, attributeId: string) => void;
-  onAttributeFocus: (id: string) => void;
   onAssignReferencesClick: (attribute: AttributeInput) => void;
   onCloseDialog: () => void;
   onVariantsAdd: () => void;
@@ -195,8 +194,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   fetchMoreAttributeValues,
   onCloseDialog,
   channelsWithVariantsData,
-  onChannelsChange,
+  onChannelsChange
-  onAttributeFocus
 }) => {
   const intl = useIntl();
 
@@ -319,7 +317,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
-                    onAttributeFocus={onAttributeFocus}
                   />
                 )}
                 <CardSpacer />

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

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

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

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,
+  warehouses
-  onAttributeFocus
 }) => {
   const selectedAttributes = attributes.filter(attribute =>
     isSelected(
@@ -73,7 +71,6 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
               type: ProductVariantCreateReducerActionType.selectValue
             })
           }
-          onAttributeFocus={onAttributeFocus}
         />
       )}
       {step === ProductVariantCreatorStep.prices && (

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,
+    onValueClick
-    onAttributeFocus
   } = 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>

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

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({
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
   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}
       />
     </>
   );

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({
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
   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"}

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({
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
 
   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}

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({
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
 
   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}
       />
     </>
   );

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({
+  } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
-    variables: {
-      id: focusedAttribute,
-      ...DEFAULT_INITIAL_SEARCH_DATA
-    },
-    skip: !focusedAttribute
-  });
 
   const fetchMoreAttributeValues = {
     hasMore: !!searchAttributeValuesOpts.data?.attribute?.choices?.pageInfo
@@ -107,7 +100,6 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
           })
         }
         warehouses={mapEdgesToItems(data?.warehouses)}
-        onAttributeFocus={setFocusedAttribute}
       />
     </>
   );

src/storybook/stories/pages/PageDetailsPage.tsx

@@ -24,8 +24,7 @@ const props: PageDetailsPageProps = {
   attributeValues: [],
   saveButtonBarState: "default",
   fetchAttributeValues: () => undefined,
-  fetchMoreAttributeValues: fetchMoreProps,
+  fetchMoreAttributeValues: fetchMoreProps
-  onAttributeFocus: () => undefined
 };
 
 storiesOf("Views / Pages / Page details", module)

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}
     />
   ));

src/storybook/stories/products/ProductUpdatePage.tsx

@@ -70,7 +70,6 @@ const props: ProductUpdatePageProps = {
   onVariantsAdd: () => undefined,
   onWarehouseConfigure: () => undefined,
   openChannelsModal: () => undefined,
-  onAttributeFocus: () => undefined,
   placeholderImage,
   product,
   referencePages: [],

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}
     />
   ));

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}
     />
   ));

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;