From 54437cec197dbb0efa700da945863fbc04b8d71c Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 8 Sep 2016 18:30:30 +0900
Subject: [PATCH] confirm on blur

---
 .../modals/PreferencesModal/StorageItem.js    | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/browser/main/modals/PreferencesModal/StorageItem.js b/browser/main/modals/PreferencesModal/StorageItem.js
index 314e5cba..6fc124bd 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -35,6 +35,10 @@ class UnstyledFolderItem extends React.Component {
   }
 
   handleConfirmButtonClick (e) {
+    this.confirm()
+  }
+
+  confirm () {
     let { storage, folder } = this.props
     dataApi
       .updateFolder(storage.key, folder.key, {
@@ -87,6 +91,17 @@ class UnstyledFolderItem extends React.Component {
     })
   }
 
+  handleFolderItemBlur (e) {
+    let el = e.relatedTarget
+    while (el != null) {
+      if (el === this.refs.root) {
+        return false
+      }
+      el = el.parentNode
+    }
+    this.confirm()
+  }
+
   renderEdit (e) {
     const popover = { position: 'absolute', zIndex: 2 }
     const cover = {
@@ -97,7 +112,11 @@ class UnstyledFolderItem extends React.Component {
       position: 'absolute'
     }, this.state.folder.colorPickerPos)
     return (
-      <div styleName='folderList-item'>
+      <div styleName='folderList-item'
+        onBlur={(e) => this.handleFolderItemBlur(e)}
+        tabIndex='-1'
+        ref='root'
+      >
         <div styleName='folderList-item-left'>
           <button styleName='folderList-item-left-colorButton' style={{color: this.state.folder.color}}
             onClick={(e) => !this.state.folder.showColumnPicker && this.handleColorButtonClick(e)}