Fix multiple file options showing up (#987) (#988)

* Fix multiple file options showing up (#987)

This change ensures that the file options composite widget is
hidden if and only if none of its components is in focus. This
is achieved by having a variable keep track of the state of
the composite widget (in focus / not in focus).

* Fix #987

Modified fix for #987 according to the requested changes.
Moved isFocused to the components state and created a method
for hadling the function calls executed in onBlur.

* Fix #987 - final touches

Renamed method blurComponent to onBlurComponent. Moved duplicated
code from onFocus callback to a new method called onFocusComponent.

client/modules/IDE/components/FileNode.jsx

@@ -24,13 +24,29 @@ export class FileNode extends React.Component {
     this.hideFileOptions = this.hideFileOptions.bind(this);
     this.showEditFileName = this.showEditFileName.bind(this);
     this.hideEditFileName = this.hideEditFileName.bind(this);
+    this.onBlurComponent = this.onBlurComponent.bind(this);
+    this.onFocusComponent = this.onFocusComponent.bind(this);
 
     this.state = {
       isOptionsOpen: false,
       isEditingName: false,
+      isFocused: false,
     };
   }
 
+  onFocusComponent() {
+    this.setState({ isFocused: true });
+  }
+
+  onBlurComponent() {
+    this.setState({ isFocused: false });
+    setTimeout(() => {
+      if (!this.state.isFocused) {
+        this.hideFileOptions();
+      }
+    }, 200);
+  }
+
   handleFileClick(e) {
     e.stopPropagation();
     if (this.props.name !== 'root' && !this.isDeleting) {
@@ -105,6 +121,7 @@ export class FileNode extends React.Component {
       'sidebar__file-item--editing': this.state.isEditingName,
       'sidebar__file-item--closed': this.props.isFolderClosed
     });
+
     return (
       <div className={itemClass}>
         {(() => { // eslint-disable-line
@@ -156,6 +173,8 @@ export class FileNode extends React.Component {
                   ref={(element) => { this[`fileOptions-${this.props.id}`] = element; }}
                   tabIndex="0"
                   onClick={this.toggleFileOptions}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
                 >
                   <InlineSVG src={downArrowUrl} />
                 </button>
@@ -171,6 +190,8 @@ export class FileNode extends React.Component {
                                 this.props.newFile();
                                 setTimeout(() => this.hideFileOptions(), 0);
                               }}
+                              onBlur={this.onBlurComponent}
+                              onFocus={this.onFocusComponent}
                               className="sidebar__file-item-option"
                             >
                               Add File
@@ -189,6 +210,8 @@ export class FileNode extends React.Component {
                                 this.props.newFolder();
                                 setTimeout(() => this.hideFileOptions(), 0);
                               }}
+                              onBlur={this.onBlurComponent}
+                              onFocus={this.onFocusComponent}
                               className="sidebar__file-item-option"
                             >
                               Add Folder
@@ -205,6 +228,8 @@ export class FileNode extends React.Component {
                           setTimeout(() => this.fileNameInput.focus(), 0);
                           setTimeout(() => this.hideFileOptions(), 0);
                         }}
+                        onBlur={this.onBlurComponent}
+                        onFocus={this.onFocusComponent}
                         className="sidebar__file-item-option"
                       >
                         Rename
@@ -219,9 +244,8 @@ export class FileNode extends React.Component {
                             setTimeout(() => this.props.deleteFile(this.props.id, this.props.parentId), 100);
                           }
                         }}
-                        onBlur={() => {
+                        onBlur={this.onBlurComponent}
-                          setTimeout(this.hideFileOptions, 200);
+                        onFocus={this.onFocusComponent}
-                        }}
                         className="sidebar__file-item-option"
                       >
                         Delete

client/modules/IDE/components/Sidebar.jsx

@@ -12,6 +12,25 @@ class Sidebar extends React.Component {
     super(props);
     this.resetSelectedFile = this.resetSelectedFile.bind(this);
     this.toggleProjectOptions = this.toggleProjectOptions.bind(this);
+    this.onBlurComponent = this.onBlurComponent.bind(this);
+    this.onFocusComponent = this.onFocusComponent.bind(this);
+
+    this.state = {
+      isFocused: false,
+    };
+  }
+
+  onBlurComponent() {
+    this.setState({ isFocused: false });
+    setTimeout(() => {
+      if (!this.state.isFocused) {
+        this.props.closeProjectOptions();
+      }
+    }, 200);
+  }
+
+  onFocusComponent() {
+    this.setState({ isFocused: true });
   }
 
   resetSelectedFile() {
@@ -65,6 +84,8 @@ class Sidebar extends React.Component {
               tabIndex="0"
               ref={(element) => { this.sidebarOptions = element; }}
               onClick={this.toggleProjectOptions}
+              onBlur={this.onBlurComponent}
+              onFocus={this.onFocusComponent}
             >
               <InlineSVG src={downArrowUrl} />
             </button>
@@ -76,6 +97,8 @@ class Sidebar extends React.Component {
                     this.props.newFolder();
                     setTimeout(this.props.closeProjectOptions, 0);
                   }}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
                 >
                   Add folder
                 </button>
@@ -87,7 +110,8 @@ class Sidebar extends React.Component {
                     this.props.newFile();
                     setTimeout(this.props.closeProjectOptions, 0);
                   }}
-                  onBlur={() => { setTimeout(this.props.closeProjectOptions, 200); }}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
                 >
                   Add file
                 </button>