diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 5f165c2e1..3c26f3ec5 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -181,7 +181,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC - {isOpen && (!!inputValue || !!choices.length) && ( + {isOpen && ( if (fetchChoices) { return ( - - {debounceFn => ( - - )} - + ); } diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx index 008d928ec..945215dfe 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx @@ -125,7 +125,8 @@ const useStyles = makeStyles( progress: {}, progressContainer: { display: "flex", - justifyContent: "center" + justifyContent: "center", + padding: `${theme.spacing(1)}px 0` }, root: { borderBottomLeftRadius: 8, @@ -173,7 +174,6 @@ const MultiAutocompleteSelectFieldContent: React.FC 0 || displayCustomValue || choices.length > 0; return ( -
- {choices.length > 0 || - displayValues.length > 0 || - displayCustomValue ? ( + {hasValuesToDisplay && ( +
<> {add && ( ); })} - {hasMore && ( - <> -
-
- -
- - )} - ) : ( - - - - )} -
+
+ )} + {!loading && !hasValuesToDisplay && ( + + + + )} + {(hasMore || loading) && ( + <> + {hasMore &&
} +
+ +
+ + )} {choices.length > maxMenuItems && (
- {debounceFn => ( - - )} - + ); } diff --git a/src/utils/handlers/attributeValueSearchHandler.ts b/src/utils/handlers/attributeValueSearchHandler.ts index c1a303977..c361a8266 100644 --- a/src/utils/handlers/attributeValueSearchHandler.ts +++ b/src/utils/handlers/attributeValueSearchHandler.ts @@ -40,7 +40,6 @@ function createAttributeValueSearchHandler( search(""); } }, [state.id]); - return { loadMore, search: handleSearch,