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:
Open any of your posts and click the pencil icon for editing. You’ll see this at the top:
Click the “add edit reason” button there. This appears:
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
4 Likes
Solution found. In this file:
https://github.com/discourse/discourse/blob/eb5cee3150fbd0b2de08d2a93b3959a20e41a691/app/assets/javascripts/discourse/controllers/composer.js.es6
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
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
zogstrip
(Régis Hanol)
March 23, 2016, 4:04pm
4
That’s because you don’t 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
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 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.
3 Likes
Thanks @Mittineague 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
sam
(Sam Saffron)
June 27, 2016, 6:50am
8
5 Likes