Pressing "Add edit reason" button does not auto-focus into the text field

This is just a really small bug and can easily be fixed.

Summary: When we press the “Add edit reason” button, the text field that comes after pressing that button does not get auto focus.

Steps to reproduce:

  1. Open any of your posts and click the pencil icon for editing. You’ll see this at the top:
  2. Click the “add edit reason” button there. This appears:
  3. As you can see, the text field does not have focus and I have to manually click that field to get what I want:

Expected results: The text field should be highlighted automatically on step 2 above.

Actual results: The text field does not get automatic highlight on step 2 above.

Version: The one that’s running on this site, right now, I don’t know how to get it.

System information: Any system will see this bug hopefully, but I am using Windows 7 with Google Chrome 48.

Hope that’s a quick fix :smiley:


Solution found. In this file:

Line 173+ need to be something like this:

displayEditReason() {
  this.set("showEditReason", true);
  # a way to get input#edit-reason and call .focus() on it

I don’t know how to interact with DOM in this file, is it simply document.querySelector()? If someone can tell me this, I will submit a PR with fixes :slight_smile:

I agree this would be a good change there’s also an alignment issue there @zogstrip, can we assist @GaurangTandon in figuring this out?


That’s because you don’t :wink: DOM interactions should only be done in a view.

You will need to catch the click in the view, bubble the event up to the controller and then do your DOM blur.


Oh, is Discourse using the Model View Controller kind of practice? I have only heard about it, but never studied, practiced or used it. Seems like a good time to learn some MVC :slight_smile: I will try to complete the first step you said.

“Yes” would be an extreme understatement.

My simplified answer would be
Discourse has a Rails backend (and yes, Rails is MVC)
with an Ember frontend (and yes, Ember is MVC)

Most of what I have exploring is es6 (a flavor of JavaScript) and some hbs (handlebars/htmlbars templates) files so I would recommend the Ember documentation.
There is a lot there, almost overwhelmingly so (for me anyway), but it will definitely help you get your toes wet.


Thanks @Mittineague :slight_smile: I have been looking into the files, and from what I can see, this line in the handlebars file:

<a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>

calls the displayEditReason click handler here:

displayEditReason() {
  this.set("showEditReason", true);

and then, since showEditReason boolean becomes true, the if branch gets executed in this:

{{#if showEditReason}}
    <div class="edit-reason-input">
          {{text-field value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
    <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a

and we see the .edit-reason-input field. I then saw this line in the view:

@observes('composeState', 'composer.action')

which makes me feel that something like this:

@observes('showEditReason', function(){
    var input = $(".edit-reason-input input");
    if(input) input.focus();

might be possible.

Or maybe I again mixed up the view code and the controller code so I will first read the docs :laughing:

Not really a bug… but fixed none the less :slight_smile: