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

Bug
1

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:

4 Likes
When editing, click on "add edit reason" should focus on input
2

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:

3

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

2 Likes
4

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.

2 Likes
5

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.

6

“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.

3 Likes
7

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"}}
    </div>
{{else}}
    <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a
{{/if}}

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:

8

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

5 Likes
Regression: edit reason input not autofocussed