diff --git a/src/components/Attributes/AttributeRow.tsx b/src/components/Attributes/AttributeRow.tsx index 4f22bd4a4..5567d16bc 100644 --- a/src/components/Attributes/AttributeRow.tsx +++ b/src/components/Attributes/AttributeRow.tsx @@ -73,6 +73,7 @@ interface AttributeRowProps extends AttributeRowHandlers { error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment; loading: boolean; entityId: string; + onAttributeSelectBlur?: () => void; } const AttributeRow: React.FC = ({ @@ -89,7 +90,8 @@ const AttributeRow: React.FC = ({ onChange, fetchAttributeValues, fetchMoreAttributeValues, - entityId + entityId, + onAttributeSelectBlur }) => { const intl = useIntl(); const classes = useStyles({}); @@ -156,6 +158,7 @@ const AttributeRow: React.FC = ({ allowCustomValues={true} fetchOnFocus={true} fetchChoices={value => fetchAttributeValues(value, attribute.id)} + onBlur={onAttributeSelectBlur} {...fetchMoreAttributeValues} /> @@ -268,6 +271,7 @@ const AttributeRow: React.FC = ({ allowCustomValues={true} fetchOnFocus={true} fetchChoices={value => fetchAttributeValues(value, attribute.id)} + onBlur={onAttributeSelectBlur} {...fetchMoreAttributeValues} /> diff --git a/src/components/Attributes/Attributes.stories.tsx b/src/components/Attributes/Attributes.stories.tsx index c068a8dcb..b7ea8081b 100644 --- a/src/components/Attributes/Attributes.stories.tsx +++ b/src/components/Attributes/Attributes.stories.tsx @@ -19,7 +19,8 @@ const props: AttributesProps = { onReferencesRemove: () => undefined, onReferencesReorder: () => undefined, fetchAttributeValues: () => undefined, - fetchMoreAttributeValues: fetchMoreProps + fetchMoreAttributeValues: fetchMoreProps, + onAttributeSelectBlur: () => undefined }; storiesOf("Attributes / Attributes", module) diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx index ac5c1c23e..7a1bb07e3 100644 --- a/src/components/Attributes/Attributes.tsx +++ b/src/components/Attributes/Attributes.tsx @@ -38,6 +38,7 @@ export interface AttributesProps extends AttributeRowHandlers { attributeValues: AttributeValueFragment[]; fetchAttributeValues: (query: string, attributeId: string) => void; fetchMoreAttributeValues: FetchMoreProps; + onAttributeSelectBlur: () => void; disabled: boolean; loading: boolean; errors: Array< @@ -117,6 +118,7 @@ const Attributes: React.FC = ({ attributeValues, errors, title, + onAttributeSelectBlur, entityId = "_defaultId", ...props }) => { @@ -168,6 +170,7 @@ const Attributes: React.FC = ({ attribute={attribute} attributeValues={attributeValues} error={error} + onAttributeSelectBlur={onAttributeSelectBlur} {...props} /> diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 7180f4ccc..e0841f022 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -89,6 +89,7 @@ export interface MultiAutocompleteSelectFieldProps testId?: string; fetchChoices?: (value: string) => void; onChange: (event: React.ChangeEvent) => void; + onBlur?: () => void; fetchOnFocus?: boolean; endAdornment?: React.ReactNode; } @@ -115,6 +116,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC debounceFn(value)} onSelect={handleSelect} itemToString={() => ""} + // this is to prevent unwanted state updates when the dropdown is closed with an empty value, + // which downshift interprets as the value being updated with an empty string, causing side-effects + stateReducer={(state, changes) => { + if (changes.isOpen === false && state.inputValue === "") { + delete changes.inputValue; + } + return changes; + }} > {({ closeMenu, @@ -175,6 +185,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC ), id: undefined, + onBlur, onClick: toggleMenu, onFocus: () => { if (fetchOnFocus) { diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index 0dca2a71b..2517c8554 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -49,6 +49,7 @@ export interface SingleAutocompleteSelectFieldProps fetchOnFocus?: boolean; FormHelperTextProps?: ExtendedFormHelperTextProps; nakedInput?: boolean; + onBlur?: () => void; } const DebounceAutocomplete: React.ComponentType debounceFn(value)} onSelect={handleChange} selectedItem={value || ""} + // this is to prevent unwanted state updates when the dropdown is closed with an empty value, + // which downshift interprets as the value being updated with an empty string, causing side-effects + stateReducer={(_, changes) => { + if (changes.isOpen === false) { + delete changes.inputValue; + } + return changes; + }} > {({ getInputProps, @@ -150,6 +160,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC { ensureProperValues(true); + onBlur(); closeMenu(); }; @@ -199,6 +210,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC {isOpen && (!!inputValue || !!choices.length) && ( void; onSelectPageType?: (pageTypeId: string) => void; + onAttributeSelectBlur: () => void; } const PageDetailsPage: React.FC = ({ @@ -85,7 +86,8 @@ const PageDetailsPage: React.FC = ({ fetchAttributeValues, fetchMoreAttributeValues, onCloseDialog, - onSelectPageType + onSelectPageType, + onAttributeSelectBlur }) => { const intl = useIntl(); const localizeDate = useDateLocalize(); @@ -189,6 +191,7 @@ const PageDetailsPage: React.FC = ({ onReferencesReorder={handlers.reorderAttributeValue} fetchAttributeValues={fetchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} + onAttributeSelectBlur={onAttributeSelectBlur} /> )} diff --git a/src/pages/views/PageCreate.tsx b/src/pages/views/PageCreate.tsx index 530eb1811..497038238 100644 --- a/src/pages/views/PageCreate.tsx +++ b/src/pages/views/PageCreate.tsx @@ -15,7 +15,7 @@ import useNotifier from "@saleor/hooks/useNotifier"; import usePageSearch from "@saleor/searches/usePageSearch"; import usePageTypeSearch from "@saleor/searches/usePageTypeSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; -import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; +import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler"; import { mapEdgesToItems } from "@saleor/utils/maps"; import { @@ -76,8 +76,9 @@ export const PageCreate: React.FC = ({ params }) => { const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + result: searchAttributeValuesOpts, + reset: searchAttributeReset + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const { data: selectedPageType } = usePageTypeQuery({ variables: { @@ -218,6 +219,7 @@ export const PageCreate: React.FC = ({ params }) => { onCloseDialog={() => navigate(pageCreateUrl())} selectedPageType={selectedPageType?.pageType} onSelectPageType={id => setSelectedPageTypeId(id)} + onAttributeSelectBlur={searchAttributeReset} /> ); diff --git a/src/pages/views/PageDetails.tsx b/src/pages/views/PageDetails.tsx index ff57b9c35..434805a2f 100644 --- a/src/pages/views/PageDetails.tsx +++ b/src/pages/views/PageDetails.tsx @@ -26,7 +26,7 @@ import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; import usePageSearch from "@saleor/searches/usePageSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; -import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; +import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; import { mapEdgesToItems } from "@saleor/utils/maps"; import { @@ -176,8 +176,9 @@ export const PageDetails: React.FC = ({ id, params }) => { const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + result: searchAttributeValuesOpts, + reset: searchAttributeReset + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const attributeValues = mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || []; @@ -237,6 +238,7 @@ export const PageDetails: React.FC = ({ id, params }) => { fetchAttributeValues={searchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} onCloseDialog={() => navigate(pageUrl(id))} + onAttributeSelectBlur={searchAttributeReset} /> void; fetchMoreReferencePages?: FetchMoreProps; fetchMoreReferenceProducts?: FetchMoreProps; + onAttributeSelectBlur: () => void; onCloseDialog: () => void; onSelectProductType: (productTypeId: string) => void; onBack?(); @@ -129,7 +130,8 @@ export const ProductCreatePage: React.FC = ({ fetchAttributeValues, fetchMoreAttributeValues, onCloseDialog, - onSelectProductType + onSelectProductType, + onAttributeSelectBlur }: ProductCreatePageProps) => { const intl = useIntl(); @@ -240,6 +242,7 @@ export const ProductCreatePage: React.FC = ({ onReferencesReorder={handlers.reorderAttributeValue} fetchAttributeValues={fetchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} + onAttributeSelectBlur={onAttributeSelectBlur} /> )} diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx index 24bbb6971..e636a113e 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx @@ -37,6 +37,7 @@ const props: ProductUpdatePageProps = { fetchCategories: () => undefined, fetchCollections: () => undefined, fetchAttributeValues: () => undefined, + onAttributeSelectBlur: () => undefined, fetchMoreCategories: fetchMoreProps, fetchMoreCollections: fetchMoreProps, fetchMoreAttributeValues: fetchMoreProps, diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index 971d05933..7f24ccafa 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx @@ -110,6 +110,7 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps { onImageDelete: (id: string) => () => void; onSubmit: (data: ProductUpdatePageSubmitData) => SubmitPromise; openChannelsModal: () => void; + onAttributeSelectBlur: () => void; onBack?(); onDelete(); onImageEdit?(id: string); @@ -194,7 +195,8 @@ export const ProductUpdatePage: React.FC = ({ fetchMoreAttributeValues, onCloseDialog, channelsWithVariantsData, - onChannelsChange + onChannelsChange, + onAttributeSelectBlur }) => { const intl = useIntl(); @@ -317,6 +319,7 @@ export const ProductUpdatePage: React.FC = ({ onReferencesReorder={handlers.reorderAttributeValue} fetchAttributeValues={fetchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} + onAttributeSelectBlur={onAttributeSelectBlur} /> )} diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx index 6036d3464..4d966701b 100644 --- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx +++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx @@ -85,6 +85,7 @@ interface ProductVariantCreatePageProps { fetchMoreReferenceProducts?: FetchMoreProps; fetchMoreAttributeValues?: FetchMoreProps; onCloseDialog: () => void; + onAttributeSelectBlur: () => void; } const ProductVariantCreatePage: React.FC = ({ @@ -112,7 +113,8 @@ const ProductVariantCreatePage: React.FC = ({ fetchMoreReferencePages, fetchMoreReferenceProducts, fetchMoreAttributeValues, - onCloseDialog + onCloseDialog, + onAttributeSelectBlur }) => { const intl = useIntl(); @@ -192,6 +194,7 @@ const ProductVariantCreatePage: React.FC = ({ onReferencesReorder={handlers.reorderAttributeValue} fetchAttributeValues={fetchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} + onAttributeSelectBlur={onAttributeSelectBlur} /> = ({ onReferencesReorder={handlers.reorderAttributeValue} fetchAttributeValues={fetchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} + onAttributeSelectBlur={onAttributeSelectBlur} /> undefined }; storiesOf("Views / Products / Create multiple variants", module) diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx index 60bf3b153..a6368a42a 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx @@ -29,6 +29,7 @@ export interface ProductVariantCreatorContentProps { warehouses: WarehouseFragment[]; fetchAttributeValues: (query: string, attributeId: string) => void; fetchMoreAttributeValues?: FetchMoreProps; + onAttributeSelectBlur: () => void; } const ProductVariantCreatorContent: React.FC = ({ @@ -42,7 +43,8 @@ const ProductVariantCreatorContent: React.FC errors, step, variantsLeft, - warehouses + warehouses, + onAttributeSelectBlur }) => { const selectedAttributes = attributes.filter(attribute => isSelected( @@ -71,6 +73,7 @@ const ProductVariantCreatorContent: React.FC type: ProductVariantCreateReducerActionType.selectValue }) } + onValueBlur={onAttributeSelectBlur} /> )} {step === ProductVariantCreatorStep.prices && ( diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx index 7aabb0b1e..6dee79cf3 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx @@ -102,6 +102,7 @@ export interface ProductVariantCreatorValuesProps { attributeId: string, value: AttributeValue> ) => void; + onValueBlur: () => void; } const ProductVariantCreatorValues: React.FC = props => { @@ -112,7 +113,8 @@ const ProductVariantCreatorValues: React.FC = fetchMoreAttributeValues, data, variantsLeft, - onValueClick + onValueClick, + onValueBlur } = props; const intl = useIntl(); const variantsNumber = getVariantsNumber(data); @@ -208,6 +210,7 @@ const ProductVariantCreatorValues: React.FC = fetchChoices={value => fetchAttributeValues(value, attribute.id) } + onBlur={onValueBlur} {...fetchMoreAttributeValues} /> )} diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx index 2655466b3..b24804014 100644 --- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx +++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx @@ -98,6 +98,7 @@ interface ProductVariantPageProps { onAssignReferencesClick: (attribute: AttributeInput) => void; onCloseDialog: () => void; onVariantReorder: ReorderAction; + onAttributeSelectBlur: () => void; onAdd(); onBack(); onDelete(); @@ -140,7 +141,8 @@ const ProductVariantPage: React.FC = ({ fetchMoreReferencePages, fetchMoreReferenceProducts, fetchMoreAttributeValues, - onCloseDialog + onCloseDialog, + onAttributeSelectBlur }) => { const intl = useIntl(); @@ -246,6 +248,7 @@ const ProductVariantPage: React.FC = ({ onReferencesReorder={handlers.reorderAttributeValue} fetchAttributeValues={fetchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} + onAttributeSelectBlur={onAttributeSelectBlur} /> = ({ onReferencesReorder={handlers.reorderAttributeValue} fetchAttributeValues={fetchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} + onAttributeSelectBlur={onAttributeSelectBlur} /> = ({ params }) => { const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + result: searchAttributeValuesOpts, + reset: searchAttributeReset + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const warehouses = useWarehouseList({ displayLoader: true, variables: { @@ -348,6 +349,7 @@ export const ProductCreateView: React.FC = ({ params }) => { onCloseDialog={() => navigate(productAddUrl())} selectedProductType={selectedProductType?.productType} onSelectProductType={id => setSelectedProductTypeId(id)} + onAttributeSelectBlur={searchAttributeReset} /> ); diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index 725740b9e..ae112d0a4 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -47,7 +47,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch"; import usePageSearch from "@saleor/searches/usePageSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; import { getProductErrorMessage } from "@saleor/utils/errors"; -import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; +import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; import { mapEdgesToItems } from "@saleor/utils/maps"; @@ -148,8 +148,9 @@ export const ProductUpdate: React.FC = ({ id, params }) => { const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + result: searchAttributeValuesOpts, + reset: searchAttributeReset + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const warehouses = useWarehouseList({ displayLoader: true, variables: { @@ -606,6 +607,7 @@ export const ProductUpdate: React.FC = ({ id, params }) => { fetchMoreReferenceProducts={fetchMoreReferenceProducts} fetchMoreAttributeValues={fetchMoreAttributeValues} onCloseDialog={() => navigate(productUrl(id))} + onAttributeSelectBlur={searchAttributeReset} /> = ({ const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + result: searchAttributeValuesOpts, + reset: searchAttributeReset + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const fetchMoreReferencePages = { hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage, @@ -376,6 +377,7 @@ export const ProductVariant: React.FC = ({ onCloseDialog={() => navigate(productVariantEditUrl(productId, variantId)) } + onAttributeSelectBlur={searchAttributeReset} /> = ({ const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + result: searchAttributeValuesOpts, + reset: searchAttributeReset + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const fetchMoreReferencePages = { hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage, @@ -241,6 +242,7 @@ export const ProductVariant: React.FC = ({ fetchAttributeValues={searchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} onCloseDialog={() => navigate(productVariantAddUrl(productId))} + onAttributeSelectBlur={searchAttributeReset} /> ); diff --git a/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx b/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx index 4c5d54330..60abf357e 100644 --- a/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx +++ b/src/products/views/ProductVariantCreator/ProductVariantCreator.tsx @@ -6,7 +6,7 @@ import useNotifier from "@saleor/hooks/useNotifier"; import { useProductVariantBulkCreateMutation } from "@saleor/products/mutations"; import { useCreateMultipleVariantsData } from "@saleor/products/queries"; import { productUrl } from "@saleor/products/urls"; -import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; +import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { useIntl } from "react-intl"; @@ -56,8 +56,9 @@ const ProductVariantCreator: React.FC = ({ const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, + reset: searchAttributeReset, result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const fetchMoreAttributeValues = { hasMore: !!searchAttributeValuesOpts.data?.attribute?.choices?.pageInfo @@ -98,6 +99,7 @@ const ProductVariantCreator: React.FC = ({ variables: { id, inputs } }) } + onAttributeSelectBlur={searchAttributeReset} warehouses={mapEdgesToItems(data?.warehouses) || []} /> diff --git a/src/storybook/stories/pages/PageDetailsPage.tsx b/src/storybook/stories/pages/PageDetailsPage.tsx index 872001e8c..8677438b9 100644 --- a/src/storybook/stories/pages/PageDetailsPage.tsx +++ b/src/storybook/stories/pages/PageDetailsPage.tsx @@ -24,6 +24,7 @@ const props: PageDetailsPageProps = { attributeValues: [], saveButtonBarState: "default", fetchAttributeValues: () => undefined, + onAttributeSelectBlur: () => undefined, fetchMoreAttributeValues: fetchMoreProps }; diff --git a/src/storybook/stories/products/ProductCreatePage.tsx b/src/storybook/stories/products/ProductCreatePage.tsx index 0fbfd1164..4eb7ca64b 100644 --- a/src/storybook/stories/products/ProductCreatePage.tsx +++ b/src/storybook/stories/products/ProductCreatePage.tsx @@ -56,6 +56,7 @@ storiesOf("Views / Products / Create product", module) onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} onSelectProductType={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("When loading", () => ( @@ -92,6 +93,7 @@ storiesOf("Views / Products / Create product", module) onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} onSelectProductType={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("form errors", () => ( @@ -143,5 +145,6 @@ storiesOf("Views / Products / Create product", module) onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} onSelectProductType={() => undefined} + onAttributeSelectBlur={() => undefined} /> )); diff --git a/src/storybook/stories/products/ProductUpdatePage.tsx b/src/storybook/stories/products/ProductUpdatePage.tsx index cba459eed..3b6093688 100644 --- a/src/storybook/stories/products/ProductUpdatePage.tsx +++ b/src/storybook/stories/products/ProductUpdatePage.tsx @@ -48,6 +48,7 @@ const props: ProductUpdatePageProps = { fetchCategories: () => undefined, fetchCollections: () => undefined, fetchAttributeValues: () => undefined, + onAttributeSelectBlur: () => undefined, fetchMoreCategories: fetchMoreProps, fetchMoreCollections: fetchMoreProps, fetchMoreAttributeValues: fetchMoreProps, diff --git a/src/storybook/stories/products/ProductVariantCreatePage.tsx b/src/storybook/stories/products/ProductVariantCreatePage.tsx index fb89957eb..e8d91c94d 100644 --- a/src/storybook/stories/products/ProductVariantCreatePage.tsx +++ b/src/storybook/stories/products/ProductVariantCreatePage.tsx @@ -40,6 +40,7 @@ storiesOf("Views / Products / Create product variant", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("with errors", () => ( @@ -82,6 +83,7 @@ storiesOf("Views / Products / Create product variant", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("when loading data", () => ( @@ -105,6 +107,7 @@ storiesOf("Views / Products / Create product variant", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("add first variant", () => ( @@ -131,6 +134,7 @@ storiesOf("Views / Products / Create product variant", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("no warehouses", () => ( @@ -154,5 +158,6 @@ storiesOf("Views / Products / Create product variant", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )); diff --git a/src/storybook/stories/products/ProductVariantPage.tsx b/src/storybook/stories/products/ProductVariantPage.tsx index c994379ca..1fbdc8044 100644 --- a/src/storybook/stories/products/ProductVariantPage.tsx +++ b/src/storybook/stories/products/ProductVariantPage.tsx @@ -39,6 +39,7 @@ storiesOf("Views / Products / Product variant details", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("when loading data", () => ( @@ -67,6 +68,7 @@ storiesOf("Views / Products / Product variant details", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("no warehouses", () => ( @@ -94,6 +96,7 @@ storiesOf("Views / Products / Product variant details", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )) .add("attribute errors", () => ( @@ -149,5 +152,6 @@ storiesOf("Views / Products / Product variant details", module) fetchAttributeValues={() => undefined} onAssignReferencesClick={() => undefined} onCloseDialog={() => undefined} + onAttributeSelectBlur={() => undefined} /> )); diff --git a/src/utils/handlers/attributeValueSearchHandler.ts b/src/utils/handlers/attributeValueSearchHandler.ts index c361a8266..a37ca3bd1 100644 --- a/src/utils/handlers/attributeValueSearchHandler.ts +++ b/src/utils/handlers/attributeValueSearchHandler.ts @@ -1,4 +1,8 @@ -import { SearchAttributeValuesVariables } from "@saleor/searches/types/SearchAttributeValues"; +import { UseSearchResult } from "@saleor/hooks/makeSearch"; +import { + SearchAttributeValues, + SearchAttributeValuesVariables +} from "@saleor/searches/types/SearchAttributeValues"; import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch"; import { useEffect, useState } from "react"; @@ -7,9 +11,18 @@ interface AttributeValueSearchHandlerState { query: string; } -function createAttributeValueSearchHandler( +export interface UseAttributeValueSearchHandler + extends Omit< + UseSearchResult, + "search" + > { + reset: () => void; + search: (query: string, id: string | null) => void; +} + +function useAttributeValueSearchHandler( variables: SearchAttributeValuesVariables -) { +): UseAttributeValueSearchHandler { const [state, setState] = useState({ id: null, query: variables.query @@ -35,16 +48,25 @@ function createAttributeValueSearchHandler( } }; + const reset = () => setState(prevState => ({ ...prevState, id: null })); + useEffect(() => { if (state.id) { search(""); } }, [state.id]); + return { loadMore, search: handleSearch, - result + reset, + result: state.id + ? result + : { + ...result, + data: undefined + } }; } -export default createAttributeValueSearchHandler; +export default useAttributeValueSearchHandler;