X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/6d7c7e9ed34aec3d30324ff544b17b7e39872f54..fdbec885a5e37bd22c5e839bc4c6c0f6c7f3b76a:/src/components/autocomplete/autocomplete.tsx

diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index c5811bb6ea..4b19b77115 100644
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -15,6 +15,7 @@ export interface AutocompleteProps<Item, Suggestion> {
     suggestions?: Suggestion[];
     error?: boolean;
     helperText?: string;
+    autofocus?: boolean;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
@@ -29,6 +30,7 @@ export interface AutocompleteState {
     suggestionsOpen: boolean;
     selectedSuggestionIndex: number;
 }
+
 export class Autocomplete<Value, Suggestion> extends React.Component<AutocompleteProps<Value, Suggestion>, AutocompleteState> {
 
     state = {
@@ -59,6 +61,7 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
 
     renderInput() {
         return <Input
+            autoFocus={this.props.autofocus}
             inputRef={this.inputRef}
             value={this.props.value}
             startAdornment={this.renderChips()}
@@ -124,7 +127,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 +152,16 @@ 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.
+         * That why we return without a value instead of returning a result of a _map_ which is an empty array.
+         */
+        if (items.length === 0) {
+            return;
+        }
+
         return items.map(
             (item, index) =>
                 <Chip