clear values on blur for attribute selects

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<AttributeRowProps> = ({
@@ -89,7 +90,8 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
   onChange,
   fetchAttributeValues,
   fetchMoreAttributeValues,
-  entityId
+  entityId,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -156,6 +158,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             allowCustomValues={true}
             fetchOnFocus={true}
             fetchChoices={value => fetchAttributeValues(value, attribute.id)}
+            onBlur={onAttributeSelectBlur}
             {...fetchMoreAttributeValues}
           />
         </BasicAttributeRow>
@@ -268,6 +271,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             allowCustomValues={true}
             fetchOnFocus={true}
             fetchChoices={value => fetchAttributeValues(value, attribute.id)}
+            onBlur={onAttributeSelectBlur}
             {...fetchMoreAttributeValues}
           />
         </BasicAttributeRow>

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)

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<AttributesProps> = ({
   attributeValues,
   errors,
   title,
+  onAttributeSelectBlur,
   entityId = "_defaultId",
   ...props
 }) => {
@@ -168,6 +170,7 @@ const Attributes: React.FC<AttributesProps> = ({
                     attribute={attribute}
                     attributeValues={attributeValues}
                     error={error}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                     {...props}
                   />
                 </React.Fragment>

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -49,6 +49,7 @@ export interface SingleAutocompleteSelectFieldProps
   fetchOnFocus?: boolean;
   FormHelperTextProps?: ExtendedFormHelperTextProps;
   nakedInput?: boolean;
+  onBlur?: () => void;
 }
 
 const DebounceAutocomplete: React.ComponentType<DebounceProps<
@@ -79,6 +80,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
     fetchOnFocus,
     FormHelperTextProps,
     nakedInput = false,
+    onBlur,
     ...rest
   } = props;
   const classes = useStyles(props);
@@ -101,6 +103,14 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
           onInputValueChange={value => 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<SingleAutocompleteSelectF
 
             const handleBlur = () => {
               ensureProperValues(true);
+              onBlur();
               closeMenu();
             };
 

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<PageDetailsPageProps> = ({
@@ -85,7 +86,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
   fetchAttributeValues,
   fetchMoreAttributeValues,
   onCloseDialog,
-  onSelectPageType
+  onSelectPageType,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
@@ -189,6 +191,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
                   onReferencesReorder={handlers.reorderAttributeValue}
                   fetchAttributeValues={fetchAttributeValues}
                   fetchMoreAttributeValues={fetchMoreAttributeValues}
+                  onAttributeSelectBlur={onAttributeSelectBlur}
                 />
               )}
               <CardSpacer />

src/pages/views/PageCreate.tsx

@@ -76,7 +76,8 @@ export const PageCreate: React.FC<PageCreateProps> = ({ 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<PageCreateProps> = ({ params }) => {
               onCloseDialog={() => navigate(pageCreateUrl())}
               selectedPageType={selectedPageType?.pageType}
               onSelectPageType={id => setSelectedPageTypeId(id)}
+              onAttributeSelectBlur={searchAttributeReset}
             />
           </>
         );

src/pages/views/PageDetails.tsx

@@ -176,7 +176,8 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ 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<PageDetailsProps> = ({ id, params }) => {
         fetchAttributeValues={searchAttributeValues}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(pageUrl(id))}
+        onAttributeSelectBlur={searchAttributeReset}
       />
       <ActionDialog
         open={params.action === "remove"}

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -84,6 +84,7 @@ interface ProductCreatePageProps {
   fetchReferenceProducts?: (data: string) => void;
   fetchMoreReferencePages?: FetchMoreProps;
   fetchMoreReferenceProducts?: FetchMoreProps;
+  onAttributeSelectBlur: () => void;
   onCloseDialog: () => void;
   onSelectProductType: (productTypeId: string) => void;
   onBack?();
@@ -129,7 +130,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   fetchAttributeValues,
   fetchMoreAttributeValues,
   onCloseDialog,
-  onSelectProductType
+  onSelectProductType,
+  onAttributeSelectBlur
 }: ProductCreatePageProps) => {
   const intl = useIntl();
 
@@ -240,6 +242,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                   />
                 )}
                 <CardSpacer />

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,

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<ProductUpdatePageProps> = ({
   fetchMoreAttributeValues,
   onCloseDialog,
   channelsWithVariantsData,
-  onChannelsChange
+  onChannelsChange,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
 
@@ -317,6 +319,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                   />
                 )}
                 <CardSpacer />

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -85,6 +85,7 @@ interface ProductVariantCreatePageProps {
   fetchMoreReferenceProducts?: FetchMoreProps;
   fetchMoreAttributeValues?: FetchMoreProps;
   onCloseDialog: () => void;
+  onAttributeSelectBlur: () => void;
 }
 
 const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
@@ -112,7 +113,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
   fetchMoreReferencePages,
   fetchMoreReferenceProducts,
   fetchMoreAttributeValues,
-  onCloseDialog
+  onCloseDialog,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
 
@@ -192,6 +194,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 onReferencesReorder={handlers.reorderAttributeValue}
                 fetchAttributeValues={fetchAttributeValues}
                 fetchMoreAttributeValues={fetchMoreAttributeValues}
+                onAttributeSelectBlur={onAttributeSelectBlur}
               />
               <CardSpacer />
               <Attributes
@@ -213,6 +216,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                 onReferencesReorder={handlers.reorderAttributeValue}
                 fetchAttributeValues={fetchAttributeValues}
                 fetchMoreAttributeValues={fetchMoreAttributeValues}
+                onAttributeSelectBlur={onAttributeSelectBlur}
               />
               <CardSpacer />
               <ProductShipping

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<ProductVariantPageProps> = ({
   fetchMoreReferencePages,
   fetchMoreReferenceProducts,
   fetchMoreAttributeValues,
-  onCloseDialog
+  onCloseDialog,
+  onAttributeSelectBlur
 }) => {
   const intl = useIntl();
 
@@ -246,6 +248,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                   />
                   <CardSpacer />
                   <Attributes
@@ -270,6 +273,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                     fetchAttributeValues={fetchAttributeValues}
                     fetchMoreAttributeValues={fetchMoreAttributeValues}
+                    onAttributeSelectBlur={onAttributeSelectBlur}
                   />
                   <CardSpacer />
                   <ProductVariantMedia

src/products/views/ProductCreate/ProductCreate.tsx

@@ -109,7 +109,8 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ 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<ProductCreateProps> = ({ params }) => {
         onCloseDialog={() => navigate(productAddUrl())}
         selectedProductType={selectedProductType?.productType}
         onSelectProductType={id => setSelectedProductTypeId(id)}
+        onAttributeSelectBlur={searchAttributeReset}
       />
     </>
   );

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -148,7 +148,8 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ 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<ProductUpdateProps> = ({ id, params }) => {
         fetchMoreReferenceProducts={fetchMoreReferenceProducts}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(productUrl(id))}
+        onAttributeSelectBlur={searchAttributeReset}
       />
       <ActionDialog
         open={params.action === "remove"}

src/products/views/ProductVariant.tsx

@@ -303,7 +303,8 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
   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<ProductUpdateProps> = ({
         onCloseDialog={() =>
           navigate(productVariantEditUrl(productId, variantId))
         }
+        onAttributeSelectBlur={searchAttributeReset}
       />
       <ProductVariantDeleteDialog
         confirmButtonState={deleteVariantOpts.status}

src/products/views/ProductVariantCreate.tsx

@@ -171,7 +171,8 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
   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<ProductVariantCreateProps> = ({
         fetchAttributeValues={searchAttributeValues}
         fetchMoreAttributeValues={fetchMoreAttributeValues}
         onCloseDialog={() => navigate(productVariantAddUrl(productId))}
+        onAttributeSelectBlur={searchAttributeReset}
       />
     </>
   );

src/storybook/stories/pages/PageDetailsPage.tsx

@@ -24,6 +24,7 @@ const props: PageDetailsPageProps = {
   attributeValues: [],
   saveButtonBarState: "default",
   fetchAttributeValues: () => undefined,
+  onAttributeSelectBlur: () => undefined,
   fetchMoreAttributeValues: fetchMoreProps
 };
 

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

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,

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

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