From 11bead49c42c78ac2f451e5cf4b4a6853775646a Mon Sep 17 00:00:00 2001 From: sektordv Date: Wed, 11 Aug 2021 11:47:01 +0200 Subject: [PATCH 1/3] clear values on blur, prevent unnecessary updates --- .../MultiAutocompleteSelectField.tsx | 11 +++++++ src/pages/views/PageCreate.tsx | 4 +-- src/pages/views/PageDetails.tsx | 4 +-- .../ProductVariantCreator.stories.tsx | 3 +- .../ProductVariantCreatorContent.tsx | 5 ++- .../ProductVariantCreatorValues.tsx | 5 ++- .../views/ProductCreate/ProductCreate.tsx | 4 +-- .../views/ProductUpdate/ProductUpdate.tsx | 4 +-- src/products/views/ProductVariant.tsx | 4 +-- src/products/views/ProductVariantCreate.tsx | 4 +-- .../ProductVariantCreator.tsx | 6 ++-- .../handlers/attributeValueSearchHandler.ts | 32 ++++++++++++++++--- 12 files changed, 64 insertions(+), 22 deletions(-) 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/pages/views/PageCreate.tsx b/src/pages/views/PageCreate.tsx index 530eb1811..c074c4e7f 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 { @@ -77,7 +77,7 @@ export const PageCreate: React.FC = ({ params }) => { loadMore: loadMoreAttributeValues, search: searchAttributeValues, result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const { data: selectedPageType } = usePageTypeQuery({ variables: { diff --git a/src/pages/views/PageDetails.tsx b/src/pages/views/PageDetails.tsx index ff57b9c35..9c305e7ec 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 { @@ -177,7 +177,7 @@ export const PageDetails: React.FC = ({ id, params }) => { loadMore: loadMoreAttributeValues, search: searchAttributeValues, result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const attributeValues = mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || []; diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx index 1dd349667..22648fc74 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx @@ -109,7 +109,8 @@ const props: ProductVariantCreatorContentProps = { errors: [], variantsLeft: 6, step: ProductVariantCreatorStep.values, - warehouses: warehouseList + warehouses: warehouseList, + onAttributeSelectBlur: () => undefined }; storiesOf("Views / Products / Create multiple variants", module) 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/views/ProductCreate/ProductCreate.tsx b/src/products/views/ProductCreate/ProductCreate.tsx index 15a623b9d..41e56905f 100644 --- a/src/products/views/ProductCreate/ProductCreate.tsx +++ b/src/products/views/ProductCreate/ProductCreate.tsx @@ -35,7 +35,7 @@ import useProductSearch from "@saleor/searches/useProductSearch"; import useProductTypeSearch from "@saleor/searches/useProductTypeSearch"; import { useTaxTypeList } from "@saleor/taxes/queries"; import { getProductErrorMessage } from "@saleor/utils/errors"; -import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; +import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler"; import { mapEdgesToItems } from "@saleor/utils/maps"; @@ -110,7 +110,7 @@ export const ProductCreateView: React.FC = ({ params }) => { loadMore: loadMoreAttributeValues, search: searchAttributeValues, result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const warehouses = useWarehouseList({ displayLoader: true, variables: { diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index 94334046b..d8f5cac2f 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"; @@ -149,7 +149,7 @@ export const ProductUpdate: React.FC = ({ id, params }) => { loadMore: loadMoreAttributeValues, search: searchAttributeValues, result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const warehouses = useWarehouseList({ displayLoader: true, variables: { diff --git a/src/products/views/ProductVariant.tsx b/src/products/views/ProductVariant.tsx index 97cd8d5de..41e738e72 100644 --- a/src/products/views/ProductVariant.tsx +++ b/src/products/views/ProductVariant.tsx @@ -25,7 +25,7 @@ import { useProductVariantChannelListingUpdate } from "@saleor/products/mutation import { ProductVariantDetails_productVariant } from "@saleor/products/types/ProductVariantDetails"; import usePageSearch from "@saleor/searches/usePageSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; -import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; +import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; import { mapEdgesToItems } from "@saleor/utils/maps"; @@ -304,7 +304,7 @@ export const ProductVariant: React.FC = ({ loadMore: loadMoreAttributeValues, search: searchAttributeValues, result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const fetchMoreReferencePages = { hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage, diff --git a/src/products/views/ProductVariantCreate.tsx b/src/products/views/ProductVariantCreate.tsx index 30fb36d31..7f35bc703 100644 --- a/src/products/views/ProductVariantCreate.tsx +++ b/src/products/views/ProductVariantCreate.tsx @@ -13,7 +13,7 @@ import useNavigator from "@saleor/hooks/useNavigator"; import useShop from "@saleor/hooks/useShop"; import usePageSearch from "@saleor/searches/usePageSearch"; import useProductSearch from "@saleor/searches/useProductSearch"; -import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; +import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler"; import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler"; import { mapEdgesToItems } from "@saleor/utils/maps"; import { @@ -172,7 +172,7 @@ export const ProductVariant: React.FC = ({ loadMore: loadMoreAttributeValues, search: searchAttributeValues, result: searchAttributeValuesOpts - } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); + } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const fetchMoreReferencePages = { hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage, 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/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; From bb890fa5f0266ee148d51ee5c747a32a78b48961 Mon Sep 17 00:00:00 2001 From: sektordv Date: Wed, 11 Aug 2021 16:38:44 +0200 Subject: [PATCH 2/3] clear values on blur for attribute selects --- src/components/Attributes/AttributeRow.tsx | 6 +++++- src/components/Attributes/Attributes.stories.tsx | 3 ++- src/components/Attributes/Attributes.tsx | 3 +++ .../SingleAutocompleteSelectField.tsx | 11 +++++++++++ .../components/PageDetailsPage/PageDetailsPage.tsx | 5 ++++- src/pages/views/PageCreate.tsx | 4 +++- src/pages/views/PageDetails.tsx | 4 +++- .../ProductCreatePage/ProductCreatePage.tsx | 5 ++++- .../ProductUpdatePage/ProductUpdatePage.test.tsx | 1 + .../ProductUpdatePage/ProductUpdatePage.tsx | 5 ++++- .../ProductVariantCreatePage.tsx | 6 +++++- .../ProductVariantPage/ProductVariantPage.tsx | 6 +++++- src/products/views/ProductCreate/ProductCreate.tsx | 4 +++- src/products/views/ProductUpdate/ProductUpdate.tsx | 4 +++- src/products/views/ProductVariant.tsx | 4 +++- src/products/views/ProductVariantCreate.tsx | 4 +++- src/storybook/stories/pages/PageDetailsPage.tsx | 1 + src/storybook/stories/products/ProductCreatePage.tsx | 3 +++ src/storybook/stories/products/ProductUpdatePage.tsx | 1 + .../stories/products/ProductVariantCreatePage.tsx | 5 +++++ src/storybook/stories/products/ProductVariantPage.tsx | 4 ++++ 21 files changed, 76 insertions(+), 13 deletions(-) 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/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index 0dca2a71b..737ff4bb8 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={(state, changes) => { + if (changes.isOpen === false && state.inputValue === "") { + delete changes.inputValue; + } + return changes; + }} > {({ getInputProps, @@ -150,6 +160,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC { ensureProperValues(true); + onBlur(); closeMenu(); }; diff --git a/src/pages/components/PageDetailsPage/PageDetailsPage.tsx b/src/pages/components/PageDetailsPage/PageDetailsPage.tsx index 6dd0e0e76..a495590c7 100644 --- a/src/pages/components/PageDetailsPage/PageDetailsPage.tsx +++ b/src/pages/components/PageDetailsPage/PageDetailsPage.tsx @@ -59,6 +59,7 @@ export interface PageDetailsPageProps { fetchMoreAttributeValues?: FetchMoreProps; onCloseDialog: () => void; onSelectPageType?: (pageTypeId: string) => void; + onAttributeSelectBlur: () => void; } const PageDetailsPage: React.FC = ({ @@ -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 c074c4e7f..497038238 100644 --- a/src/pages/views/PageCreate.tsx +++ b/src/pages/views/PageCreate.tsx @@ -76,7 +76,8 @@ export const PageCreate: React.FC = ({ params }) => { const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts + result: searchAttributeValuesOpts, + reset: searchAttributeReset } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const { data: selectedPageType } = usePageTypeQuery({ @@ -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 9c305e7ec..434805a2f 100644 --- a/src/pages/views/PageDetails.tsx +++ b/src/pages/views/PageDetails.tsx @@ -176,7 +176,8 @@ export const PageDetails: React.FC = ({ id, params }) => { const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts + result: searchAttributeValuesOpts, + reset: searchAttributeReset } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const attributeValues = @@ -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} /> 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 + result: searchAttributeValuesOpts, + reset: searchAttributeReset } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const warehouses = useWarehouseList({ displayLoader: true, @@ -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 d8f5cac2f..e0511fa01 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -148,7 +148,8 @@ export const ProductUpdate: React.FC = ({ id, params }) => { const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts + result: searchAttributeValuesOpts, + reset: searchAttributeReset } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const warehouses = useWarehouseList({ displayLoader: true, @@ -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 + result: searchAttributeValuesOpts, + reset: searchAttributeReset } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const fetchMoreReferencePages = { @@ -376,6 +377,7 @@ export const ProductVariant: React.FC = ({ onCloseDialog={() => navigate(productVariantEditUrl(productId, variantId)) } + onAttributeSelectBlur={searchAttributeReset} /> = ({ const { loadMore: loadMoreAttributeValues, search: searchAttributeValues, - result: searchAttributeValuesOpts + result: searchAttributeValuesOpts, + reset: searchAttributeReset } = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA); const fetchMoreReferencePages = { @@ -241,6 +242,7 @@ export const ProductVariant: React.FC = ({ fetchAttributeValues={searchAttributeValues} fetchMoreAttributeValues={fetchMoreAttributeValues} onCloseDialog={() => navigate(productVariantAddUrl(productId))} + onAttributeSelectBlur={searchAttributeReset} /> ); 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} /> )); From 22210564e73a755d40bc9b53beb34b4c2b01978a Mon Sep 17 00:00:00 2001 From: sektordv Date: Thu, 12 Aug 2021 11:00:49 +0200 Subject: [PATCH 3/3] fix for single selects with values selected --- .../SingleAutocompleteSelectField.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index 737ff4bb8..2517c8554 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -105,8 +105,8 @@ const SingleAutocompleteSelectFieldComponent: React.FC { - if (changes.isOpen === false && state.inputValue === "") { + stateReducer={(_, changes) => { + if (changes.isOpen === false) { delete changes.inputValue; } return changes; @@ -210,6 +210,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC {isOpen && (!!inputValue || !!choices.length) && (