How to focus ui-select corner input?

Question

myProblem: I have a mod that has a ui-select dropdown. when the modal arrives, myUser can select one item with a keyboard. but the focus is not on the modal. how can i focus on input (important, input) ui-select? Many thanks.

<ui-select class="cursorISI aaa  selectType2 border-fixed" 
    on-select="Func.selectAnotherProject($item, $model)" theme="selectize"
    ng-model="oldSelectedProject"> <ui-select-match>{{$select.selected.title}}
</ui-select-match> <ui-select-choices
    repeat="project in  projectList|filter: $select.search "
    refresh-delay="0" style="direction: ltr; text-align: right;">

<div ng-bind="project.title"
    ng-show="runSelectedProject.uid!=project.uid"></div>
</ui-select-choices> </ui-select>

Answer 1

Actually, it's pretty simple. A simple look at the documentation will tell you this.

autofocus: automatically load focus. The default value is false.

So just add this to the first line of your html like <ui-select class="cursorISI aaa selectType2 border-fixed" autofocus="true"

Hope this helps - Cheers

Answer 2

,

.directive('focusMe', function($timeout) {
    return {
      scope: {trigger: '@focusMe'},
      link: function(scope, element) {
        scope.$watch('trigger', function(value) {
          if (value === 'true') {
            $timeout(function() {
              element[0].focus();
            });
          }
        });
      }
    };
  })

ui-select

 focus-me="true"

Answer 3

ui-select :

yourModule.directive('uiSelectOpened', function($timeout) {
    return {
        restrict: 'A',
        require: 'uiSelect',
        link: function(scope, element, attrs, uiSelect) {
            $timeout(()=> uiSelect.toggle())
        }
    };
});

HTML:

<ui-select ... autofocus="true" ui-select-opened>...</ui-select>

Answer 4

If you are trying to achieve this from a controller or directive (this method works independently and its completely angular way to do it) -

say ui-select wrapped in div -

<div id="ui-select-wrapper">
    <ui-select>
        ...
    </ui-select>
</div>

Controller Method setFocus -

var uiSelectWrapper = document.getElementById('ui-select-wrapper');
var focusser = uiSelectWrapper.querySelector('.ui-select-focusser');

var focusser = angular.element(uiSelectWrapper.querySelector('.ui-select-focusser'));

focusser.focus();