feat: Keyboard Enter key can be used to select item in data browser filter dialog field dropdown (#2771)

Author: dblythy

src/components/Autocomplete/Autocomplete.react.js

@@ -251,10 +251,17 @@ export default class Autocomplete extends Component {
     // Enter
     const { userInput } = this.state;
 
-    if (e.keyCode === 13) {
-      if (userInput && userInput.length > 0) {
+    if (e.keyCode === 13 || e.key === 'Enter') {
+      if (userInput && userInput.length > 0 && this.props.onSubmit) {
         this.props.onSubmit(userInput);
       }
+
+      this.setState({
+        active: true,
+        activeSuggestion: 0,
+        showSuggestions: false,
+        userInput: filteredSuggestions[activeSuggestion] || userInput,
+      });
     } else if (e.keyCode === 9) {
       // Tab
       // do not type it

src/components/SuggestionsList/SuggestionsList.scss

@@ -29,6 +29,7 @@
   color: #0e69a1;
   cursor: pointer;
   font-weight: 500;
+  background: rgba(255, 255, 255, 0.1) !important;
 }
 
 .suggestions li:not(:last-of-type) {