How do I return focus to an element when the entire page changes?

Question

I have a complicated setup. My application is driven by a set of "rules" which dictate what the user interface is. The UI is rendered by looping through the rules and creating the individual dropdowns. Initially, everything renders properly. However, once a user makes a change to the UI, other rules may be affected. In my application, an api call is made, which then returns a modified set of rules. In the attached plunker, I've simplified things such that only the new set of rules is applied, which causes the page to re-render. The problem is that my users would like to be able to tab between all of the entries on the page and make changes. However, once the page is re-rendered, the currently selected page element is now gone nothing has the focus. I've tried to put the focus back on the proper element by tracking a common Id, but to no avail.

Using either of these doesn't seem to work.

var el = document.getElementById(focusId); el.focus(); angular.element(el).focus();

I've also tried using the autofocus attribute on the dropdown that I want to have focus, but that didn't work either. I'm using angularjs 1.2. Any ideas are appreciated.

http://plnkr.co/edit/ND9PKqULIOlixWR4XChN?p=preview

If it is rerendering or reloading you can always store that selected element in local storage. Are there any reference errors? Or errors at all in the console? — DDelgro, Mar 30 '17 at 18:39
I am storing the selected element, but the setting of the focus isn't working. I don't see any console errors. — wandercoder, Mar 30 '17 at 18:40
Maybe the focusId is a null or undefined when it gets re-rendered? — DDelgro, Mar 30 '17 at 18:44

score 0 · Answer 1 · edited May 23 '17 at 12:02

0

If you want to assign auto focus dynamically to a element on the DOM from angular you can use this:

var myEl = angular.element(document.querySelector('select'));
myEl.attr('autofocus',"attr val");

You can also pass in an id like: angular.element(document.querySelector('#focusId'));

You can look here for a prior answer which may be of some more help!

-Cheers!

edited May 23 '17 at 12:02

Community

1
1

answered Mar 30 '17 at 18:59

DDelgro

463
1
6
16

ajai Jothi · Answer 2 · 2017-03-30T19:10:33.493

0

Problem here is, you are trying to focus the element before the blur event completes. So you need to execute the focus code after blur event. Async execution of your focus code would solve the problem. You can use either setTimeout or $timeout.

setTimeout(function(){
    angular.element('#'+focusId).focus();

    /* //or 
    var el = document.getElementById(focusId);
    el.focus();
    */

});

or

$timeout(function(){
    angular.element('#'+focusId).focus();

    /* //or 
    var el = document.getElementById(focusId);
    el.focus();
    */

});

dont forgot to inject $timeout to your controller if you are using second code. Hope this helps :)

edited Mar 30 '17 at 19:10

answered Mar 30 '17 at 19:05

ajai Jothi

2,284
1
8
16

Good idea and I tried that, but I believe that the blur is complete. I'm able to change other attributes on the page (e.g. the color of the text), but not the focus. Focus seems to be the sticking point. – wandercoder Mar 30 '17 at 20:21
problem here is, the other attribute value changes before blur event get completes. Default behavior of blur is to reset focus from the element after execution. – ajai Jothi Mar 30 '17 at 20:28

How do I return focus to an element when the entire page changes?

2 Answers2