Merge pull request #2747 from hypothesis/179-focus-in-username-field-when-sign-in-is-clicked

Keyboard focus the login form when shown

h/static/scripts/app.coffee

@@ -109,6 +109,7 @@ module.exports = angular.module('h', [
 .directive('formInput', require('./directive/form-input'))
 .directive('formValidate', require('./directive/form-validate'))
 .directive('groupList', require('./directive/group-list').directive)
+.directive('hAutofocus', require('./directive/h-autofocus'))
 .directive('markdown', require('./directive/markdown'))
 .directive('simpleSearch', require('./directive/simple-search'))
 .directive('statusButton', require('./directive/status-button'))

h/static/scripts/directive/h-autofocus.js

+'use strict';
+
+/** An attribute directive that focuses an <input> when it's linked by Angular.
+ *
+ * The HTML5 autofocus attribute automatically puts the keyboard focus in an
+ * <input> on page load. But this doesn't work for <input>s that are
+ * rendered by JavaScript/Angular after page load, for example an <input> that
+ * is shown/hidden by JavaScript when an ng-if condition becomes true.
+ *
+ * To automatically put the keyboard focus on such an input when it's linked by
+ * Angular, attach this directive to it as an attribute:
+ *
+ *   <input ng-if="..." h-autofocus>
+ *
+*/
+module.exports = function() {
+  return {
+    restrict: 'A',
+    link: function($scope, $element, $attrs) {
+      $element.focus();
+    }
+  };
+};

h/templates/client/auth.html

@@ -23,7 +23,7 @@
         <input class="form-input" type="text" id="field-login-username"
                name="username" value=""
                ng-model="model.username"
-               required autocapitalize="false" />
+               required autocapitalize="false" h-autofocus />
         <ul class="form-error-list">
           <li class="form-error"
               ng-show="login.username.$error.required"