Enter key handled for rename project option

Author: LakshSingla

client/modules/IDE/components/SketchList.jsx

@@ -21,8 +21,13 @@ class SketchList extends React.Component {
     this.props.getProjects(this.props.username);
     this.state = {
       actionDialogueDisplayed: new Array(this.props.sketches.length).fill(false),
-      renameBoxDisplayed: new Array(this.props.sketches.length).fill(false)
+      renameBoxDisplayed: new Array(this.props.sketches.length).fill(false),
+      renameBoxContent: this.props.sketches.map(({ name }) => name)
     };
+
+    this.closeAllDropdowns = this.closeAllDropdowns.bind(this);
+    this.closeAllRenameBoxes = this.closeAllRenameBoxes.bind(this);
+    this.restoreRenameBoxContent = this.restoreRenameBoxContent.bind(this);
   }
 
   getSketchesTitle() {
@@ -44,6 +49,12 @@ class SketchList extends React.Component {
     });
   }
 
+  restoreRenameBoxContent() {
+    this.setState({
+      renameBoxContent: this.props.sketches.map(({ name }) => name)
+    });
+  }
+
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
@@ -96,7 +107,24 @@ class SketchList extends React.Component {
                     {this.state.renameBoxDisplayed[i]
                       &&
                       <input
+                        value={this.state.renameBoxContent[i]}
+                        onChange={(e) => {
+                          const renameBoxContent = [...this.state.renameBoxContent];
+                          renameBoxContent[i] = e.target.value;
+                          this.setState({
+                            renameBoxContent
+                          });
+                        }}
+                        onKeyUp={(e) => {
+                          // Enter pressed
+                          if (e.key === 'Enter') {
+                            this.restoreRenameBoxContent();
+                            this.closeAllRenameBoxes();
+                          }
+                        }}
+                        onBlur={this.restoreRenameBoxContent}
                         onClick={e => e.stopPropagation()}
+                        autoFocus //eslint-disable-line
                       />
                     }
                   </th>
@@ -107,6 +135,7 @@ class SketchList extends React.Component {
                       className="sketch-list__dropdown-button"
                       onClick={(e) => {
                         e.stopPropagation();
+                        this.closeAllRenameBoxes();
                         this.setState(() => {
                           const actionDialogueDisplayed = new Array(this.props.sketches.length).fill(false);
                           actionDialogueDisplayed[i] = true;