From c28dd826fec5ba6963cd0dc64e1efb745079a5dd Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Fri, 22 Jul 2016 13:56:17 -0400
Subject: [PATCH] UX: Focus on usernames if creating a PM from your user page

---
 .../discourse/components/composer-title.js.es6    |  8 ++++----
 .../components/composer-user-selector.js.es6      |  8 ++++++++
 .../discourse/controllers/composer.js.es6         | 15 +++++++++++++++
 .../javascripts/discourse/templates/composer.hbs  |  8 ++++----
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/composer-title.js.es6 b/app/assets/javascripts/discourse/components/composer-title.js.es6
index 8ede0fd3d69..3d806ca0f7d 100644
--- a/app/assets/javascripts/discourse/components/composer-title.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-title.js.es6
@@ -1,12 +1,12 @@
-import { default as computed, on } from 'ember-addons/ember-computed-decorators';
+import computed from 'ember-addons/ember-computed-decorators';
 import InputValidation from 'discourse/models/input-validation';
 
 export default Ember.Component.extend({
   classNames: ['title-input'],
 
-  @on('didInsertElement')
-  _focusOnTitle() {
-    if (!this.capabilities.isIOS) {
+  didInsertElement() {
+    this._super();
+    if (this.get('focusTarget') === 'title') {
       this.$('input').putCursorAtEnd();
     }
   },
diff --git a/app/assets/javascripts/discourse/components/composer-user-selector.js.es6 b/app/assets/javascripts/discourse/components/composer-user-selector.js.es6
index d977d6e3093..4d440091f56 100644
--- a/app/assets/javascripts/discourse/components/composer-user-selector.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-user-selector.js.es6
@@ -5,6 +5,14 @@ export default Ember.Component.extend({
   shouldHide: false,
   defaultUsernameCount: 0,
 
+  didInsertElement() {
+    this._super();
+
+    if (this.get('focusTarget') === 'usernames') {
+      this.$('input').putCursorAtEnd();
+    }
+  },
+
   @observes('usernames')
   _checkWidth() {
     let width = 0;
diff --git a/app/assets/javascripts/discourse/controllers/composer.js.es6 b/app/assets/javascripts/discourse/controllers/composer.js.es6
index 0903a274719..f896464a18e 100644
--- a/app/assets/javascripts/discourse/controllers/composer.js.es6
+++ b/app/assets/javascripts/discourse/controllers/composer.js.es6
@@ -64,6 +64,21 @@ export default Ember.Controller.extend({
   topic: null,
   linkLookup: null,
 
+  @computed('model.replyingToTopic', 'model.creatingPrivateMessage', 'model.targetUsernames')
+  focusTarget(replyingToTopic, creatingPM, usernames) {
+    if (this.capabilities.isIOS) { return "none"; }
+
+    if (creatingPM && usernames === this.currentUser.get('username')) {
+      return 'usernames';
+    }
+
+    if (replyingToTopic) {
+      return 'reply';
+    }
+
+    return 'title';
+  },
+
   showToolbar: Em.computed({
     get(){
       const keyValueStore = this.container.lookup('key-value-store:main');
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 0680e931a12..acb26b18540 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -49,9 +49,9 @@
             <div class='form-element clearfix'>
               {{#if model.creatingPrivateMessage}}
                 {{composer-user-selector topicId=topicModel.id
-                                usernames=model.targetUsernames
-                                hasGroups=model.hasTargetGroups
-                                }}
+                                         usernames=model.targetUsernames
+                                         hasGroups=model.hasTargetGroups
+                                         focusTarget=focusTarget}}
                 {{#if showWarning}}
                   <div class='add-warning'>
                     <label>
@@ -62,7 +62,7 @@
                 {{/if}}
               {{/if}}
 
-              {{composer-title composer=model lastValidatedAt=lastValidatedAt}}
+              {{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}
 
               {{#if model.showCategoryChooser}}
                 <div class="category-input">