dialog input autofocus

frontend/src/components/dialog/create-group-dialog.js

@@ -12,6 +12,12 @@ class CreateGroupDialog extends React.Component {
       groupName: '',
       errorMsg: '',
     };
+    this.newInput = React.createRef();
+  }
+
+  componentDidMount() {
+    this.newInput.focus();
+    this.newInput.setSelectionRange(0, 0);
   }
 
   handleGroupChange = (event) => {
@@ -51,6 +57,7 @@ class CreateGroupDialog extends React.Component {
   handleKeyDown = (e) => {
     if (e.keyCode === 13) {
       this.handleSubmitGroup();
+      e.preventDefault();
     }
   }
 
@@ -60,8 +67,14 @@ class CreateGroupDialog extends React.Component {
         <ModalHeader toggle={this.props.toggleAddGroupModal}>{gettext('New Group')}</ModalHeader>
         <ModalBody>
           <label htmlFor="groupName">{gettext('Name')}</label>
-          <Input type="text" id="groupName" value={this.state.groupName}
-            onChange={this.handleGroupChange} onKeyDown={this.handleKeyDown}/>
+          <Input
+            innerRef={input => {this.newInput = input;}}
+            type="text"
+            id="groupName"
+            value={this.state.groupName}
+            onChange={this.handleGroupChange}
+            onKeyDown={this.handleKeyDown}
+          />
           <span className="error">{this.state.errorMsg}</span>
         </ModalBody>
         <ModalFooter>

frontend/src/components/dialog/org-add-department-dialog.js

@@ -17,6 +17,12 @@ class AddDepartDialog extends React.Component {
       departName: '',
       errMessage: '',
     };
+    this.newInput = React.createRef();
+  }
+
+  componentDidMount() {
+    this.newInput.focus();
+    this.newInput.setSelectionRange(0, 0);
   }
 
   handleSubmit = () => {
@@ -74,6 +80,7 @@ class AddDepartDialog extends React.Component {
                 onKeyPress={this.handleKeyPress} 
                 value={this.state.departName} 
                 onChange={this.handleChange}
+                innerRef={input => {this.newInput = input;}}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/org-add-repo-dialog.js

@@ -17,6 +17,12 @@ class AddRepoDialog extends React.Component {
       repoName: '',
       errMessage: '',
     };
+    this.newInput = React.createRef();
+  }
+
+  componentDidMount() {
+    this.newInput.focus();
+    this.newInput.setSelectionRange(0, 0);
   }
 
   handleSubmit = () => {
@@ -69,6 +75,7 @@ class AddRepoDialog extends React.Component {
                 onKeyPress={this.handleKeyPress} 
                 value={this.state.repoName} 
                 onChange={this.handleChange}
+                innerRef={input => {this.newInput = input;}}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/org-set-group-quota-dialog.js

@@ -18,6 +18,12 @@ class SetGroupQuotaDialog extends React.Component {
       quota: '',
       errMessage: '',
     };
+    this.newInput = React.createRef();
+  }
+
+  componentDidMount() {
+    this.newInput.focus();
+    this.newInput.setSelectionRange(0, 0);
   }
 
   setGroupQuota = () => {
@@ -58,6 +64,7 @@ class SetGroupQuotaDialog extends React.Component {
               onKeyPress={this.handleKeyPress} 
               value={this.state.quota} 
               onChange={this.handleChange}
+              innerRef={input => {this.newInput = input;}}
             />
             <InputGroupAddon addonType="append">{'MB'}</InputGroupAddon>
           </InputGroup>