Merge pull request #733 from matrix-org/luke/display-name-blur-to-submit

Submit a new display name on blur of input field

src/components/views/elements/EditableText.js

@@ -33,7 +33,10 @@ module.exports = React.createClass({
         className: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
         placeholderClassName: React.PropTypes.string,
+        // Overrides blurToSubmit if true
         blurToCancel: React.PropTypes.bool,
+        // Will cause onValueChanged(value, true) to fire on blur
+        blurToSubmit: React.PropTypes.bool,
         editable: React.PropTypes.bool,
     },
 
@@ -51,6 +54,7 @@ module.exports = React.createClass({
             editable: true,
             className: "mx_EditableText",
             placeholderClassName: "mx_EditableText_placeholder",
+            blurToSubmit: false,
         };
     },
 
@@ -119,6 +123,7 @@ module.exports = React.createClass({
         this.value = this.props.initialValue;
         this.showPlaceholder(!this.value);
         this.onValueChanged(false);
+        this.refs.editable_div.blur();
     },
 
     onValueChanged: function(shouldSubmit) {
@@ -182,13 +187,15 @@ module.exports = React.createClass({
         }
     },
 
-    onFinish: function(ev) {
+    onFinish: function(ev, shouldSubmit) {
         var self = this;
-        var submit = (ev.key === "Enter");
+        var submit = (ev.key === "Enter") || shouldSubmit;
         this.setState({
             phase: this.Phases.Display,
         }, function() {
-            self.onValueChanged(submit);
+            if (this.value !== this.props.initialValue) {
+                self.onValueChanged(submit);
+            }
         });
     },
 
@@ -199,7 +206,7 @@ module.exports = React.createClass({
         if (this.props.blurToCancel)
             {this.cancelEdit();}
         else
-            {this.onFinish(ev);}
+            {this.onFinish(ev, this.props.blurToSubmit);}
 
         this.showPlaceholder(!this.value);
     },

src/components/views/elements/EditableTextContainer.js

@@ -116,6 +116,7 @@ export default class EditableTextContainer extends React.Component {
                 <EditableText initialValue={this.state.value}
                     placeholder={this.props.placeholder}
                     onValueChanged={this._onValueChanged}
+                    blurToSubmit={this.props.blurToSubmit}
                 />
             );
         }
@@ -137,11 +138,15 @@ EditableTextContainer.propTypes = {
     /* callback to update the value. Called with a single argument: the new
      * value. */
     onSubmit: React.PropTypes.func,
+
+    /* should the input submit when focus is lost? */
+    blurToSubmit: React.PropTypes.bool,
 };
 
 
 EditableTextContainer.defaultProps = {
     initialValue: "",
     placeholder: "",
+    blurToSubmit: false,
     onSubmit: function(v) {return q(); },
 };

src/components/views/settings/ChangeDisplayName.js

@@ -53,6 +53,7 @@ module.exports = React.createClass({
             <EditableTextContainer
                 getInitialValue={this._getDisplayName}
                 placeholder="No display name"
+                blurToSubmit={true}
                 onSubmit={this._changeDisplayName} />
         );
     }