From a5e576adca978a5123290ca26bee20764824ec76 Mon Sep 17 00:00:00 2001
From: Damon Aw <daemonsy@gmail.com>
Date: Tue, 14 Oct 2014 22:51:01 -0400
Subject: [PATCH] UX Improvement: Autofocus the topic field on edit

- After clicking on the pencil icon to edit a topic, the focus is not set on the input.
- This leads to cases where using keyboard shorcuts (e.g. cmd + left) leads to navigation instead.
- Searching around online, it seems the cleanest way to add a text-field that autofocuses is to create a component.
- I followed the [cookbook](http://emberjs.com/guides/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/) and did the most naive implementation.
- This focuses the text-field but at the start of the input. Setting selectionStart and selectionEnd solves this problem, but does not work on IE 8 and below.
---
 .../discourse/components/autofocus-text-field.js.es6       | 7 +++++++
 app/assets/javascripts/discourse/templates/topic.hbs       | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/components/autofocus-text-field.js.es6

diff --git a/app/assets/javascripts/discourse/components/autofocus-text-field.js.es6 b/app/assets/javascripts/discourse/components/autofocus-text-field.js.es6
new file mode 100644
index 00000000000..29ecbb0d30e
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/autofocus-text-field.js.es6
@@ -0,0 +1,7 @@
+export default Ember.TextField.extend({
+  becomeFocused: function() {
+    var input = this.get("element");
+    input.focus();
+    input.selectionStart = input.selectionEnd = input.value.length;
+  }.on('didInsertElement')
+});
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index 5bf289e72e3..5f251277bdb 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -17,9 +17,9 @@
           {{#if editingTopic}}
             {{#if isPrivateMessage}}
               <span class="private-message-glyph">{{fa-icon envelope}}</span>
-              {{text-field id='edit-title' value=newTitle maxLength=maxTitleLength}}
+              {{autofocus-text-field id='edit-title' value=newTitle maxLength=maxTitleLength}}
             {{else}}
-              {{text-field id='edit-title' value=newTitle maxLength=maxTitleLength}}
+              {{autofocus-text-field id='edit-title' value=newTitle maxLength=maxTitleLength}}
               </br>
               {{category-chooser valueAttribute="id" value=newCategoryId source=category_id}}
             {{/if}}