Add autocomplete option in the dependency search

Fixes codesandbox#1508

Author: CompuIves

packages/app/src/app/pages/Sandbox/SearchDependencies/RawAutoComplete/index.js

@@ -3,7 +3,7 @@ import Downshift from 'downshift';
 
 import { Pagination } from 'react-instantsearch/dom';
 
-import { ENTER } from 'common/utils/keycodes';
+import { ENTER, TAB, ARROW_RIGHT } from 'common/utils/keycodes';
 
 import DependencyHit from '../DependencyHit';
 import { AutoCompleteInput, SuggestionInput } from './elements';
@@ -63,6 +63,12 @@ class RawAutoComplete extends React.Component {
     const version = getVersion(this.state.value, hit);
     const isValid = getIsValid(this.state.value, hit, version);
 
+    const autoCompletedQuery = isExplicitVersion(this.state.value)
+      ? null
+      : hit && isValid
+        ? hit.name + '@' + hit.version
+        : null;
+
     return (
       <Downshift itemToString={h => (h ? h.name : h)} onSelect={onSelect}>
         {({ getInputProps, getItemProps, highlightedIndex }) => (
@@ -125,13 +131,9 @@ class RawAutoComplete extends React.Component {
                 onKeyUp: e => {
                   // If enter with no selection
                   if (e.keyCode === ENTER) {
-                    onManualSelect(
-                      isExplicitVersion(this.state.value)
-                        ? e.target.value
-                        : hit && isValid
-                          ? hit.name + '@' + hit.version
-                          : e.target.value
-                    );
+                    onManualSelect(autoCompletedQuery || e.target.value);
+                  } else if (autoCompletedQuery && e.keyCode === ARROW_RIGHT) {
+                    this.setState({ value: autoCompletedQuery });
                   }
                 },
               })}

packages/common/utils/keycodes.js

@@ -1,4 +1,5 @@
 export const BACKSPACE = 8;
+export const TAB = 9;
 export const ENTER = 13;
 export const ESC = 27;
 export const ARROW_LEFT = 37;