Merge pull request #9353 from adobe/dangoor/9316-rename-collapse

File tree: properly handle clicks on nested files and directories

Author: ingorichter

src/project/FileTreeView.js

@@ -95,6 +95,18 @@ define(function (require, exports, module) {
      * and invoking the correct action based on that input.
      */
     var renameBehavior = {
+        /**
+         * Stop clicks from propagating so that clicking on the rename input doesn't
+         * cause directories to collapse.
+         */
+        handleClick: function (e) {
+            e.stopPropagation();
+            if (e.button !== LEFT_MOUSE_BUTTON) {
+                return false;
+            }
+            return true;
+        },
+        
         /**
          * If the user presses enter or escape, we either successfully complete or cancel, respectively,
          * the rename or create operation that is underway.
@@ -169,12 +181,13 @@ define(function (require, exports, module) {
             var width = _measureText(this.props.name);
 
             return DOM.input({
-                className: "jstree-rename-input " + this.props.fileClasses,
+                className: "jstree-rename-input",
                 type: "text",
                 defaultValue: this.props.name,
                 autoFocus: true,
                 onKeyDown: this.handleKeyDown,
                 onKeyUp: this.handleKeyUp,
+                onClick: this.handleClick,
                 onBlur: this.handleBlur,
                 style: {
                     width: width
@@ -432,8 +445,7 @@ define(function (require, exports, module) {
                     actions: this.props.actions,
                     entry: this.props.entry,
                     name: this.props.name,
-                    parentPath: this.props.parentPath,
-                    fileClasses: fileClasses
+                    parentPath: this.props.parentPath
                 });
             } else {
                 // Need to flatten the argument list because getIcons returns an array
@@ -530,10 +542,11 @@ define(function (require, exports, module) {
                 onKeyDown: this.handleKeyDown,
                 onKeyUp: this.handleKeyUp,
                 onBlur: this.handleBlur,
-                ref: "name",
                 style: {
                     width: width
-                }
+                },
+                onClick: this.handleClick,
+                ref: "name"
             });
         }
     });
@@ -646,22 +659,26 @@ define(function (require, exports, module) {
                 directoryClasses += " context-node";
             }
 
-            var nameDisplay;
+            var nameDisplay, renameInput;
             if (entry.get("rename")) {
-                nameDisplay = directoryRenameInput({
+                renameInput = directoryRenameInput({
                     actions: this.props.actions,
                     entry: this.props.entry,
                     name: this.props.name,
                     parentPath: this.props.parentPath
                 });
-            } else {
-                // Need to flatten the arguments because getIcons returns an array
-                var aArgs = _.flatten([{
-                    href: "#",
-                    className: directoryClasses
-                }, this.getIcons(), this.props.name], true);
-                nameDisplay = DOM.a.apply(DOM.a, aArgs);
             }
+            
+            // Need to flatten the arguments because getIcons returns an array
+            var aArgs = _.flatten([{
+                href: "#",
+                className: directoryClasses
+            }, this.getIcons()], true);
+            if (!entry.get("rename")) {
+                aArgs.push(this.props.name);
+            }
+            
+            nameDisplay = DOM.a.apply(DOM.a, aArgs);
 
             return DOM.li({
                 className: this.getClasses("jstree-" + nodeClass),
@@ -671,6 +688,7 @@ define(function (require, exports, module) {
                 DOM.ins({
                     className: "jstree-icon"
                 }, " "),
+                renameInput,
                 nameDisplay,
                 childNodes);
         }

src/project/ProjectManager.js

@@ -1131,7 +1131,7 @@ define(function (require, exports, module) {
         model.setSelectionWidth($projectTreeContainer.width());
 
         $(".main-view").click(function (jqEvent) {
-            if (jqEvent.target.className !== "jstree-rename-input") {
+            if (!jqEvent.target.classList.contains("jstree-rename-input")) {
                 forceFinishRename();
                 actionCreator.setContext(null);
             }

src/styles/jsTreeTheme.less

@@ -31,8 +31,7 @@
 .jstree-rtl li { margin-left:0; margin-right:18px; }
 .jstree > ul > li { margin-left:0px; }
 .jstree-rtl > ul > li { margin-right:0px; }
-.jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; } +
-.jstree a { display:inline-block; line-height:16px; height:16px; color:black; white-space:nowrap; text-decoration:none; padding:1px 2px; margin:0; }
+.jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; }
 .jstree a:focus { outline: none; }
 .jstree a > ins { height:16px; width:16px; }
 .jstree a > .jstree-icon { margin-right:3px; }