Autofocus the first input field

[mquandalle]

Hello,

I think it should be the default to autofocus the first input field when a atForm form is rendered. Currently I'm using the simple:

Template.atForm.onRendered(function() {
  this.find('input').focus();
});

but it does not handle some of the navigation scenarios, for instance if a user switch the form state by clicking on the “I already have an account, log in” link.

[splendido]

That's a good point!

What about trying to leverage _uihooks for the atPwdForm template?
Everytime the #each used to draw input fields undergoes some changed, your this.find('input').focus(); would do the trick, right?

[mquandalle]

It probably makes more sense to use the onRendered callback, not on the atForm because of the state refresh issue I evoked in OP, but on lower level template in the template hierarchy such as atInput.

TBH I'm not sure if this issue should be solved by meteor-useraccounts, or instead solved in a more generic way be Blaze. I created this package that is basically adding a onRendered callback that focus any field with the autofocus attribute. It's sort of a hack because it has some runtime overhead, but Spacebars could do something more clever at compile time.

[splendido]

yeah an onRendered callback on the atInput template might check if it is the first visible input in list and, in case, focus the contained input element...

[splendido]

Could you please have a look at the above linked commit?

It seems working and quite reasonable...
The only unelegant thing is the use of $ in place of template.$ at this line but I don't think there's an easy way to propagate the current template down there...

Let me know your thoughts

[mquandalle]

Did you try Template.instance()?

[splendido]

yes, but it's the template for the link which is picked up and there are no input elements inside there :(

[yauh]

I think this autofocus is messing up my views inside cordova: meteor-useraccounts/ionic#8. Any chance to make this configurable? I need a fix in small mobile screens...

[jerocosio]

I would also like to know a way disable this feature, because it is causing some problems with my UI as well.

[yauh]

I used a brute-force approach to solve the issue for now. While it is not pretty it works for my app:

styles.css add this code

#invisible {
  opacity: 0;
  height: 1px;
  -webkit-appearance: none;
}

For the template add this code

<template name="welcome">
    {{#contentFor "headerTitle"}}
        <h1 class="title">Welcome</h1>
    {{/contentFor}}
    {{#ionContent class="has-tabs"}}
        <h1 class="padding">Please register first!</h1>
        <div id="invisible">
            <select id="top"></select>
        </div>
          ...
          {{>atForm}}
          ...
    {{/ionContent}}
</template>

And finally for the code:

Template.welcome.onRendered( function () {
  // probably works just as well without setTimeout
  Meteor.setTimeout( function () {
    $( '#top' ).focus()
  }, 10 );
} );

[jerocosio]

I tried your solution with no luck, I will continue looking into this so I can solve it, thanks. ;)

[gwendall]

Having the first visible input focused should be made optional. Feel free to merge #481.

[sweetticket]

Any update on this? I'm using just iOS for now. I'm having a hard to autofocusing on a static textarea.

[splendido]

A new focusFirstInput option has been included into v1.12.0
Lets try:

AccountsTemplates.configure({
  focusFirstInput: false
})