From bb890fa5f0266ee148d51ee5c747a32a78b48961 Mon Sep 17 00:00:00 2001 From: sektordv Date: Wed, 11 Aug 2021 16:38:44 +0200 Subject: [PATCH] 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} /> ));