[feat] Go to first open line when enter is pressed

When filling out the signup or login pages, and when adding an
additional service provider, the enter key will trigger the submit
action. When on the choose provider page, enter will take you to the
next page.

- Resolves: #8841

1 files changed, 21 insertions, 3 deletions

diff --git a/ui/app/components/list_editor/index.js b/ui/app/components/list_editor/index.js
index 58b6ec44..4fff1cab 100644
--- a/ui/app/components/list_editor/index.js
+++ b/ui/app/components/list_editor/index.js
@@ -20,7 +20,8 @@ class ListEdit extends React.Component {
     selected: null,  // string of the selected item
     onRemove: null,
     onAdd: null,
-    onSelect: null
+    onSelect: null,
+    onKeyDown: null
   }}
 
   constructor(props) {
@@ -64,6 +65,18 @@ class ListEdit extends React.Component {
     }
   }
 
+  componentDidMount() {
+    if (this.props.onKeyDown) {
+      this.listEditorDiv.addEventListener("keydown", this.props.onKeyDown)
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.onKeyDown) {
+      this.listEditorDiv.removeEventListener("keydown", this.props.onKeyDown)
+    }
+  }
+
   render() {
     let options = null
     if (this.props.items) {
@@ -72,11 +85,16 @@ class ListEdit extends React.Component {
       }, this)
     }
     return(
-      <div className="list-editor">
+      <div
+        ref={(div) => { this.listEditorDiv = div; }}
+        className="list-editor" >
         <FormControl
           value={this.row(this.props.selected)}
           className="list-select"
-          componentClass="select" size="5" onChange={this.click}>
+          componentClass="select"
+          size="5"
+          onChange={this.click}
+        >
           {options}
         </FormControl>
         <ButtonToolbar className="pull-right list-toolbar">