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

discourse · Jun 13, 2018 · 4e0c06a · 4e0c06a · discoursebot · Jun 13, 2018
1 parent 4a9dadb
commit 4e0c06a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/app/assets/javascripts/discourse/components/link-to-input.js.es6 b/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;
+  }
+});
diff --git a/app/assets/javascripts/discourse/templates/components/link-to-input.hbs b/app/assets/javascripts/discourse/templates/components/link-to-input.hbs
@@ -0,0 +1,5 @@
+{{#if showInput}}
+  {{yield}}
+{{else}}
+  <a href>{{i18n key}}</a>
+{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -24,11 +24,9 @@
                 {{/unless}}
 
                 {{#if canEdit}}
-                  {{#if showEditReason}}
-                    {{text-field autofocus="true" value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
-                  {{else}}
-                    <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
-                  {{/if}}
+                  {{#link-to-input onClick=(action "displayEditReason") showInput=showEditReason key="composer.show_edit_reason" class="display-edit-reason"}}
+                    {{text-field value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
+                  {{/link-to-input}}
                 {{/if}}
               </div>
               {{composer-toggles composeState=model.composeState

diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
@@ -157,6 +157,10 @@
     font-style: italic;
   }
 
+  .display-edit-reason {
+    display: inline;
+  }
+
   #edit-reason {
     margin: 4px;
   }