From bb752d3baddf4dad2079cbaf6e47ac89a8a514e9 Mon Sep 17 00:00:00 2001 From: Wojciech Mista Date: Mon, 4 Oct 2021 09:40:24 +0200 Subject: [PATCH] Fix an issue where adornment can't be clicked in multi-select input fields (#1435) * WIP * Make adornment click-through * Fix adornemnt in single autocomplete select field * Added stories tests --- .../MultiAutocompleteSelectField.tsx | 9 +- .../SingleAutocompleteSelectField.tsx | 8 +- .../__snapshots__/Stories.test.ts.snap | 396 +++++++++++++----- 3 files changed, 311 insertions(+), 102 deletions(-) diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 99edf6d0e..6b87c6620 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -66,7 +66,12 @@ const useStyles = makeStyles( }, adornment: { display: "flex", - alignItems: "center" + alignItems: "center", + userSelect: "none", + cursor: "pointer", + "&:active": { + pointerEvents: "none" + } } }), { name: "MultiAutocompleteSelectField" } @@ -181,7 +186,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC {endAdornment} - toggleMenu()} /> + ), id: undefined, diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index 55b080b9f..f3ee4e6f7 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -23,6 +23,12 @@ const useStyles = makeStyles( }, nakedInput: { padding: theme.spacing(2, 3) + }, + adornment: { + cursor: "pointer", + "&:active": { + pointerEvents: "none" + } } }), { name: "SingleAutocompleteSelectField" } @@ -174,7 +180,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC +
), diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 057049c26..3aba7859a 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -131,7 +131,9 @@ exports[`Storyshots Attributes / Attributes default 1`] = ` type="text" value="" /> -
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+