INT-1160: Handle focus on insert

Author: durran

src/internal-packages/crud/lib/component/document-list.jsx

@@ -25,11 +25,6 @@ const LIST_CLASS = 'document-list';
  */
 const SCROLL_EVENT = 'scroll';
 
-/**
- * Base empty doc for insert dialog.
- */
-const EMPTY_DOC = { '': '' };
-
 /**
  * Component for the entire document list.
  */
@@ -148,7 +143,7 @@ class DocumentList extends React.Component {
    * Handle opening of the insert dialog.
    */
   handleOpenInsert() {
-    Actions.openInsertDocumentDialog(EMPTY_DOC);
+    Actions.openInsertDocumentDialog({ _id: new ObjectID(), '': '' }, false);
   }
 
   /**

src/internal-packages/crud/lib/component/document.jsx

@@ -224,7 +224,7 @@ class Document extends React.Component {
    * Handle cloning of the document.
    */
   handleClone() {
-    Actions.openInsertDocumentDialog(this.doc);
+    Actions.openInsertDocumentDialog(this.doc, true);
   }
 
   /**
@@ -234,6 +234,9 @@ class Document extends React.Component {
     this.setState({ deleting: true });
   }
 
+  /**
+   * Handles canceling a delete.
+   */
   handleCancelDelete() {
     this.setState({ deleting: false });
   }

src/internal-packages/crud/lib/component/editable-element.jsx

@@ -116,7 +116,7 @@ class EditableElement extends React.Component {
       <li className={this.style()}>
         <div className='line-number'></div>
         {this.renderAction()}
-        <EditableKey element={this.element} />
+        <EditableKey element={this.element} insertIndex={this.props.insertIndex} />
         :
         {this.renderValue()}
         <Types element={this.element} />

src/internal-packages/crud/lib/component/editable-key.jsx

@@ -39,7 +39,12 @@ class EditableKey extends React.Component {
    */
   componentDidMount() {
     if (this.element.isAdded()) {
-      if (!this.isEditable() && this._node) {
+      if (this.props.insertIndex) {
+        // Focus for inserting new documents.
+        if (this.props.insertIndex === 1 && this.element.currentKey === '') {
+          this._node.focus();
+        }
+      } else if (!this.isEditable() && this._node) {
         this._node.focus();
       }
     }

src/internal-packages/crud/lib/component/insert-document.jsx

@@ -68,9 +68,9 @@ class InsertDocument extends React.Component {
    * @returns {Array} The editable elements.
    */
   renderElements() {
-    var elements = _.map(this.doc.elements, (element) => {
+    var elements = _.map(this.doc.elements, (element, index) => {
       return (
-        <EditableElement key={element.uuid} element={element} />
+        <EditableElement key={element.uuid} element={element} insertIndex={index} />
       );
     });
     var lastComponent = elements[elements.length - 1];

src/internal-packages/crud/lib/store/open-insert-document-dialog-store.js

@@ -20,13 +20,16 @@ const OpenInsertDocumentDialogStore = Reflux.createStore({
    * Open the insert document dialog.
    *
    * @param {Object} doc - The document to open the dialog with.
+   * @param {Booelan} clone - If the operation is a clone.
    */
-  openInsertDocumentDialog: function(doc) {
+  openInsertDocumentDialog: function(doc, clone) {
     var hadronDoc = new HadronDocument(doc, true);
-    // We need to remove the _id or we will get an duplicate key error on
-    // insert, and we currently do not allow editing of the _id field.
-    if (hadronDoc.elements[0].currentKey === '_id') {
-      hadronDoc.elements.shift();
+    if (clone) {
+      // We need to remove the _id or we will get an duplicate key error on
+      // insert, and we currently do not allow editing of the _id field.
+      if (hadronDoc.elements[0].currentKey === '_id') {
+        hadronDoc.elements.shift();
+      }
     }
     this.trigger(hadronDoc);
   }