状态改变后保持焦点

Question

In my AngularJS/Ui-Router application I have a series of input box like this:

<input ng-model="vm.filter" ng-keyup="vm.onKeyUp($event)" type="text" class="form-control" id="filter">

Then I have a controller, in which I have put the onKeyUp function, that looks like this:

var vm = this;
vm.onKeyUp = function (e) {
    var val = e.currentTarget.value;
    $state.go('aState', { 'filter': val });
}

This will fire the state change (really just state parameter filter is changed) that will call a resolve behind the scene and at the end of the flow, my data set is filtered and the subset is showed. Amazing.

But there is a little problem: on the state changed the HTML input lost its focus, and I can't figure out how can set it on focus at the end of the flow. This is necessary since the user start to write in the input box and then will be surprised when his focus get "misteriously" lost. Bad UI experience.

Answer 1

Ok for what can i read you just call the same state with different parameters on the url ( :filter ), what happens even if the state is the same is that the stateChange force a reload of the view and therefore the lost of the focused element.

And that is the behaviour unless you make a event.preventDefault() on $stateChangeStart but im pretty sure your data will not be updated.

So possible solutions are imho:

1. Rethink your flow so it doenst depend on state change. (No need to code here :P)

2. Find a way to save your active element and set it on reload, like.

    //sessionStorage to prevent data stored after window is closed; $scope.$on('$stateChangeStart', function(){ $window.sessionStorage.setItem('focusedId', '#' + document.activeElement.id); }); $scope.$on('$viewContentLoaded', function(){ if((var id = $window.sessionStorage.getItem('focusedId'))) { $DOM.focus(id); //Use a service for DOM manipulation, you know manipulation in controllers is bad :( } }); 

` the service could be like this:

.factory('$DOM', ['$window', '$timeout', function ($window, $timeout) {
    return {
        __constructor: function (selector, event) {
             $timeout(function () {
                 var element = (typeof selector == 'object') ? 
                               selector :    
                               $window.document.querySelector(selector);

                 (!!element && !!element[event]) ? element[event]() : null;
              });
          },
          focus: function (selector) {
              this.__constructor(selector, 'focus');
          },
          blur: function (selector) {
              this.__constructor(selector, 'blur');
          }, //and so....
      };
}])

comment if you find a better way, maybe you can refresh the data preventing the refresh of the view and my understanding of ui.router is wrong :)