From 1311588157eb6947739089cda637f504a1cb53a2 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 29 Nov 2019 13:19:18 +0100 Subject: [PATCH 1/6] Fix clickable areas --- .../MultiAutocompleteSelectFieldContent.tsx | 22 ++++++++++--------- .../SingleAutocompleteSelectFieldContent.tsx | 22 ++++++++++--------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx index cb99854fe..e059c6880 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx @@ -275,17 +275,19 @@ const MultiAutocompleteSelectFieldContent: React.FC< )} -
-
- + {choices.length > maxMenuItems && ( +
+
+ +
-
+ )} ); }; diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx index 35b56e9e9..ba948c0a0 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx @@ -228,17 +228,19 @@ const SingleAutocompleteSelectFieldContent: React.FC< )}
-
-
- + {choices.length > maxMenuItems && ( +
+
+ +
-
+ )} ); }; From d8c4b7640fbc03d0c6584c2719f7d59261618d4e Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 29 Nov 2019 13:21:59 +0100 Subject: [PATCH 2/6] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bb57de0f..f2d285c24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ All notable, unreleased changes to this project will be documented in this file. - Use searches as hooks instead of components - #262 by @dominik-zeglen - Add navigator - #267 by @dominik-zeglen - Fix voucher limit - #271 by @dominik-zeglen +- Fix dropdown clickable areas - #281 by @dominik-zeglen ## 2.0.0 From 4f82cc2d4c29b0998d3914fd44e8d0d5ebecf6ab Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 2 Dec 2019 16:37:48 +0100 Subject: [PATCH 3/6] Update snapshots --- .../__snapshots__/Stories.test.ts.snap | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index ec9718967..660fee0a7 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -3051,17 +3051,6 @@ exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = `
-
-
- -
-
@@ -4980,17 +4969,6 @@ exports[`Storyshots Generics / Select with autocomplete no data 1`] = ` No results found -
-
- -
-
From 76a60f7dfe223adce5bd6fe355c71e007bc081ce Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 2 Dec 2019 16:48:19 +0100 Subject: [PATCH 4/6] Let click event pass through arrow --- package-lock.json | 3 ++- .../MultiAutocompleteSelectFieldContent.tsx | 3 ++- .../SingleAutocompleteSelectFieldContent.tsx | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 41c04c99a..128fb29ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3289,7 +3289,8 @@ "@types/semver-compare": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/semver-compare/-/semver-compare-1.0.1.tgz", - "integrity": "sha512-wx2LQVvKlEkhXp/HoKIZ/aSL+TvfJdKco8i0xJS3aR877mg4qBHzNT6+B5a61vewZHo79EdZavskGnRXEC2H6A==" + "integrity": "sha512-wx2LQVvKlEkhXp/HoKIZ/aSL+TvfJdKco8i0xJS3aR877mg4qBHzNT6+B5a61vewZHo79EdZavskGnRXEC2H6A==", + "dev": true }, "@types/shallowequal": { "version": "1.1.1", diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx index e059c6880..2f3032c11 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx @@ -70,7 +70,8 @@ const useStyles = makeStyles( padding: 8 }, hide: { - opacity: 0 + opacity: 0, + zIndex: -1 }, hr: { margin: theme.spacing(1, 0) diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx index ba948c0a0..602a24b47 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx @@ -62,7 +62,8 @@ const useStyles = makeStyles( padding: 8 }, hide: { - opacity: 0 + opacity: 0, + zIndex: -1 }, hr: { margin: theme.spacing(1, 0) From 2660fe40ddf8d62a12f5e6acbabbb8bd316ee268 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20Szyma=C5=84ski?= Date: Tue, 3 Dec 2019 10:17:01 +0100 Subject: [PATCH 5/6] Fixed error cleanup when switching product variants --- src/products/views/ProductVariant.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/products/views/ProductVariant.tsx b/src/products/views/ProductVariant.tsx index 317ec0c6b..f7f914575 100644 --- a/src/products/views/ProductVariant.tsx +++ b/src/products/views/ProductVariant.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { useIntl } from "react-intl"; import placeholderImg from "@assets/images/placeholder255x255.png"; @@ -43,6 +43,7 @@ export const ProductVariant: React.FC = ({ require={["productVariant"]} > {({ data, loading }) => { + const [errors, setErrors] = useState([]); const variant = data ? data.productVariant : undefined; const handleBack = () => navigate(productUrl(productId)); const handleDelete = () => { @@ -54,8 +55,10 @@ export const ProductVariant: React.FC = ({ navigate(productUrl(productId)); }; const handleUpdate = (data: VariantUpdate) => { - if (!maybe(() => data.productVariantUpdate.productErrors.length)) { + if (!data.productVariantUpdate.productErrors.length) { notify({ text: intl.formatMessage(commonMessages.savedChanges) }); + } else { + setErrors(data.productVariantUpdate.productErrors); } }; @@ -107,12 +110,7 @@ export const ProductVariant: React.FC = ({ <> data.productVariant.name)} /> - updateVariant.opts.data.productVariantUpdate - .productErrors, - [] - )} + errors={errors} saveButtonBarState={formTransitionState} loading={disableFormSave} placeholderImage={placeholderImg} @@ -146,6 +144,7 @@ export const ProductVariant: React.FC = ({ }} onVariantClick={variantId => { navigate(productVariantEditUrl(productId, variantId)); + setErrors([]); }} /> Date: Tue, 3 Dec 2019 13:26:07 +0100 Subject: [PATCH 6/6] Added useEffect so error fix will work when browser history changes --- src/products/views/ProductVariant.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/products/views/ProductVariant.tsx b/src/products/views/ProductVariant.tsx index f7f914575..5ace13fb2 100644 --- a/src/products/views/ProductVariant.tsx +++ b/src/products/views/ProductVariant.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { useIntl } from "react-intl"; import placeholderImg from "@assets/images/placeholder255x255.png"; @@ -35,6 +35,10 @@ export const ProductVariant: React.FC = ({ const navigate = useNavigator(); const notify = useNotifier(); const intl = useIntl(); + const [errors, setErrors] = useState([]); + useEffect(() => { + setErrors([]); + }, [variantId]); return ( = ({ require={["productVariant"]} > {({ data, loading }) => { - const [errors, setErrors] = useState([]); const variant = data ? data.productVariant : undefined; const handleBack = () => navigate(productUrl(productId)); const handleDelete = () => { @@ -144,7 +147,6 @@ export const ProductVariant: React.FC = ({ }} onVariantClick={variantId => { navigate(productVariantEditUrl(productId, variantId)); - setErrors([]); }} />