Focus on other input after typeahead-on-select angular-ui-bootstrap

Question

I have a problem with angular-ui bootstrap: I have 2 input:

<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $event)" class="form-control">
<textarea class="form-control" id="message" rows="10" data-ng-model="caller.data.text" tabindex="25"></textarea>

And in my controller I have a function focusSuccessive($item, $model, $label, $event)" that should focus textArea after selected.

$scope.focusSuccessive = function($item, $model, $label, $event){
   angular.element("#message").focus();
}

But it doesn't work, But if I put a button like:

<button ng-click="focusSuccessive()">focus</button>

It work, so How Can I focus a textarea or input after typeahead selected?

Answer 1

This behaviour is happening because of callback in typeahead-on-select. It focuses your element but input gets focussed again due to this code

$timeout(function() {
   element[0].focus(); 
 }, 0, false);

You can solve this by focusing your element asynchronously.

In your focusSuccessive function use a $timeout and focus your textarea inside that $timeout

$scope.focusSuccessive = function($item, $model, $label, $event){
  $timeout(function() { 
    document.getElementById('message').focus(); 

  }, 100, false);
}

This will solve your issue.

I am not sure that there is some other way to solve this issue which don't require using $timeout

EDIT

I think there is a option in typeahead-settings

typeahead-focus-on-select

Which is set to true by default, setting it to false will disable this behaviour and you dont need $timeout. Just focus your element normally

<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $event)" typeahead-focus-on-select=false class="form-control">