discourse/discourse — pull request #2878 by daemonsy (2014-10-15 03:45:54+00:00)
Title: UX Improvement: Autofocus the topic field on edit

## What's up?
- After clicking on the pencil icon to edit a topic, the focus is not set on the input.
- This leads to cases where the user starts doing keyboard-fu and leads to hitting Discourse shortcuts or navigating away(e.g. cmd + left on Chrome)
- Searching around online, it seems the cleanest way to add a text-field that autofocuses is to create a subclassed component.
- I followed the [cookbook](http://emberjs.com/guides/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/) and did the most naive implementation.
- This focuses the text-field but at the start of the input, which differs from browser behaviour. Setting `selectionStart` and `selectionEnd` solves this problem, but doesn't work on IE 8 and below.

![](http://cl.ly/image/2u0v1v0c1K04/Screen%20Recording%202014-10-14%20at%2023.33.gif)

## Why
We use Discourse a lot in internal team discussions. We use the edit topic quite frequently. For example, adding WIP tag to indicate that a topic is still being fleshed out by the author. The live edit in place toggle is very modern but after clicking on it, we frequently end up hitting other keyboard shortcuts because we expect to be able to start typing immediately. The first thought was that this must be trivial but I didn't find a way to do it without adding a component or engineering an abstraction. Perhaps if this is accepted and there are other places that autofocusing is useful, there can be more reuse of the `autofocus-text-field` and then a better abstraction can be built.