Support HTML5 autofocus attribute

wmertens commented 9 years ago

http://caniuse.com/#feat=autofocus tells the browser to focus an element on page load. It would be great if Angular had support for this built-in, so that it also works on browsers that don't support it and when creating elements dynamically, like in forms.

As an example, here's a directive that does this: https://gist.github.com/mlynch/dd407b93ed288d499778 Perhaps this can be used as-is, or it might need adapting for the case where many elements with the autofocus attribute get created at once (per the spec only one such element should exist per doc but hey).

Narretz commented 9 years ago

A previous topic about this was closed as "not core": https://github.com/angular/angular.js/issues/2012#issuecomment-43817888

I agree with the reasoning, but I'll keep it open for further opinions.

wmertens commented 9 years ago

So autofocus is an HTML5 attribute whose expectation is broken by how Angular works. As it is a core attribute I would expect Angular core to handle it...

Narretz commented 9 years ago

In that sense, any website that uses JavaScript to insert page elements "breaks" the autofocus attribute.

wmertens commented 9 years ago

@Narretz sure, but Angular has the opportunity to fix it...

Declarative focus is so much nicer than imperative. It keeps the code clean, no having to access the DOM from controllers.

vitaly-t commented 9 years ago

I think that supporting attribute "autofocus" should be done in a better way in Angular, with binding.

It happens way too often that one needs to autofocus elements conditionally. For example, a default autofocus element can become disabled or invisible and you need to change autofocus accordingly.

The basic HTML5 support for it is just too primitive. Why not do it right from start and use the power of Angular to autofocus with support for optional one-way binding?

We need ng-autofocus={{boolean condition}}, to trigger focus change when a certain condition is met. When used with once-off binding, ng-autofocus={{::condition}}, it would be similar to autofocus attribute when the condition is true. And in general it would let us handle automatic focus change in response to changes within a form.

It would be used mostly through once-off binding, as this: ng-focus={{::condition}}.

wmertens commented 9 years ago

I'm not sure I agree, the autofocus attribute has the intent of specifying focus when an element first appears, not later.

The stateful focus management you propose has already been decided as not belonging into angular core... See e.g. https://github.com/goodeggs/ng-focus-on On Sat, Jan 24, 2015, 1:50 PM Vitaly Tomilov notifications@github.com wrote:

I think that supporting attribute "autofocus" should be done in a better way in Angular, with binding.

It happens way too often that one needs to autofocus elements conditionally. For example, a default autofocus element can become disabled or invisible and you need to change autofocus accordingly.

The basic HTML5 support for it is just too primitive. Why not do it right from start and use the power of Angular to autofocus with support for optional one-way binding?

— Reply to this email directly or view it on GitHub https://github.com/angular/angular.js/issues/10833#issuecomment-71315222 .