Fix autocomplete's label positioning when there is no items

Feature #14603

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index c5811bb6ea716b44692752c68d7f630d61208e7f..57881f1ac3cd6dab7bd993da7c5d9130aa602f92 100644 (file)
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -124,7 +124,7 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
         if (event.key === 'Enter') {
             if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
                 // prevent form submissions when selecting a suggestion
-                event.preventDefault(); 
+                event.preventDefault();
                 onSelect(suggestions[selectedSuggestionIndex]);
             } else if (this.props.value.length > 0) {
                 onCreate();
@@ -149,6 +149,15 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
 
     renderChips() {
         const { items, onDelete } = this.props;
+
+        /**
+         * If input startAdornment prop is not undefined, input's label will stay above the input.
+         * If there is not items, we want the label to go back to placeholder position.
+         */
+        if (items.length === 0) {
+            return;
+        }
+
         return items.map(
             (item, index) =>
                 <Chip