FIX: focusing input displayed after clicking on a link more reliable

app/assets/javascripts/discourse/components/link-to-input.js.es6

@@ -0,0 +1,15 @@
+export default Ember.Component.extend({
+  showInput: false,
+
+  click() {
+    this.get("onClick")();
+
+    Ember.run.schedule("afterRender", () => {
+      this.$()
+        .find("input")
+        .focus();
+    });
+
+    return false;
+  }
+});

app/assets/javascripts/discourse/templates/components/link-to-input.hbs

@@ -0,0 +1,5 @@
+{{#if showInput}}
+  {{yield}}
+{{else}}
+  <a href>{{i18n key}}</a>
+{{/if}}

app/assets/javascripts/discourse/templates/composer.hbs

@@ -24,11 +24,9 @@
                 {{/unless}}
 
                 {{#if canEdit}}
-                  {{#if showEditReason}}
+                  {{#link-to-input onClick=(action "displayEditReason") showInput=showEditReason key="composer.show_edit_reason" class="display-edit-reason"}}
-                    {{text-field autofocus="true" value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
+                    {{text-field value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
-                  {{else}}
+                  {{/link-to-input}}
-                    <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
-                  {{/if}}
                 {{/if}}
               </div>
               {{composer-toggles composeState=model.composeState

app/assets/stylesheets/common/base/compose.scss

@@ -157,6 +157,10 @@
     font-style: italic;
   }
 
+  .display-edit-reason {
+    display: inline;
+  }
+
   #edit-reason {
     margin: 4px;
   }