SALEOR-3513 - Fix attribute values input display (#1156)

* Fix attribute values input display with additional search handler * Update changelog * Update attribute value search handler
2021-06-14 14:19:23 +02:00 · 2021-06-14 14:19:23 +02:00 · 99aa6365be
commit 99aa6365be
parent 4f39e75f2d
28 changed files with 180 additions and 220 deletions
--- 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

--- 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>
      );
--- 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
 };
--- 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(
--- 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}>
--- 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);
                }
              }
            };
--- 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 />
--- 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}
            />
          </>
        );
--- 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"}
--- 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 />
--- 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: [],
--- 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 />
--- 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
--- 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)
--- 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 && (
--- 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>
--- 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
--- 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}
      />
    </>
  );
--- 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"}
--- 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}
--- 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}
      />
    </>
  );
--- 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}
      />
    </>
  );
--- 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)
--- 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}
    />
  ));
--- 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: [],
--- 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}
    />
  ));
--- 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}
    />
  ));
--- a/src/utils/handlers/attributeValueSearchHandler.ts
+++ 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;