Save settings by onBlur callback

src/settings/actions/setting.js

@@ -60,4 +60,4 @@ const set = (settings) => {
   };
 };
 
-export { load, save, switchToForm, switchToJson };
+export { load, save, set, switchToForm, switchToJson };

src/settings/components/form/BlacklistForm.jsx

@@ -13,9 +13,13 @@ class BlacklistForm extends React.Component {
           return <div key={index} className='form-blacklist-form-row'>
             <input data-index={index} type='text' name='url'
               className='column-url' value={url}
-              onChange={this.bindValue.bind(this)} />
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
             <DeleteButton data-index={index} name='delete'
-              onClick={this.bindValue.bind(this)} />
+              onClick={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
           </div>;
         })
       }
@@ -38,17 +42,22 @@ class BlacklistForm extends React.Component {
     }
 
     this.props.onChange(next);
+    if (name === 'delete') {
+      this.props.onBlur();
+    }
   }
 }
 
 BlacklistForm.propTypes = {
   value: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func,
+  onBlur: PropTypes.func,
 };
 
 BlacklistForm.defaultProps = {
   value: [],
   onChange: () => {},
+  onBlur: () => {},
 };
 
 export default BlacklistForm;

src/settings/components/form/KeymapsForm.jsx

@@ -20,6 +20,7 @@ class KeymapsForm extends React.Component {
                   type='text' id={name} name={name} key={name}
                   label={label} value={value}
                   onChange={this.bindValue.bind(this)}
+                  onBlur={this.props.onBlur}
                 />;
               })
             }

src/settings/components/form/PropertiesForm.jsx

@@ -27,6 +27,7 @@ class PropertiesForm extends React.Component {
                 className='column-input'
                 value={value[name] ? value[name] : ''}
                 onChange={this.bindValue.bind(this)}
+                onBlur={this.props.onBlur}
                 checked={value[name]}
               />
             </label>

src/settings/components/form/SearchForm.jsx

@@ -23,11 +23,15 @@ class SearchForm extends React.Component {
           return <div key={index} className='form-search-form-row'>
             <input data-index={index} type='text' name='name'
               className='column-name' value={engine[0]}
-              onChange={this.bindValue.bind(this)} />
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
             <input data-index={index} type='text' name='url'
               placeholder='http://example.com/?q={}'
               className='column-url' value={engine[1]}
-              onChange={this.bindValue.bind(this)} />
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
             <div className='column-option'>
               <input data-index={index} type='radio' name='default'
                 checked={value.default === engine[0]}
@@ -66,6 +70,9 @@ class SearchForm extends React.Component {
     }
 
     this.props.onChange(next);
+    if (name === 'delete' || name === 'default') {
+      this.props.onBlur();
+    }
   }
 }
 

src/settings/components/index.jsx

@@ -25,6 +25,7 @@ class SettingsComponent extends React.Component {
         <KeymapsForm
           value={form.keymaps}
           onChange={value => this.bindForm('keymaps', value)}
+          onBlur={this.save.bind(this)}
         />
       </fieldset>
       <fieldset>
@@ -32,6 +33,7 @@ class SettingsComponent extends React.Component {
         <SearchForm
           value={form.search}
           onChange={value => this.bindForm('search', value)}
+          onBlur={this.save.bind(this)}
         />
       </fieldset>
       <fieldset>
@@ -39,6 +41,7 @@ class SettingsComponent extends React.Component {
         <BlacklistForm
           value={form.blacklist}
           onChange={value => this.bindForm('blacklist', value)}
+          onBlur={this.save.bind(this)}
         />
       </fieldset>
       <fieldset>
@@ -47,6 +50,7 @@ class SettingsComponent extends React.Component {
           types={properties.types}
           value={form.properties}
           onChange={value => this.bindForm('properties', value)}
+          onBlur={this.save.bind(this)}
         />
       </fieldset>
     </div>;
@@ -61,6 +65,7 @@ class SettingsComponent extends React.Component {
         spellCheck='false'
         error={error}
         onChange={this.bindJson.bind(this)}
+        onBlur={this.save.bind(this)}
         value={json}
       />
     </div>;
@@ -109,7 +114,7 @@ class SettingsComponent extends React.Component {
       form: { ...this.props.form },
     };
     settings.form[name] = value;
-    this.props.dispatch(settingActions.save(settings));
+    this.props.dispatch(settingActions.set(settings));
   }
 
   bindJson(e) {
@@ -118,7 +123,7 @@ class SettingsComponent extends React.Component {
       json: e.target.value,
       form: this.props.form,
     };
-    this.props.dispatch(settingActions.save(settings));
+    this.props.dispatch(settingActions.set(settings));
   }
 
   bindSource(e) {
@@ -135,7 +140,9 @@ class SettingsComponent extends React.Component {
       }
       this.props.dispatch(settingActions.switchToForm(this.props.json));
     }
+  }
 
+  save() {
     let settings = this.props.store.getState();
     this.props.dispatch(settingActions.save(settings));
   }