7

myProblem is I have a box modal that have ui-select dropdown. when the modal come iwant myUser can choose oneOf the item with keyboard. but focus is not on modal. how can i focus on input(important, input) of ui-select? thanks alot.

<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>
1
  • Can you provide a jsfiddle demo? Commented Sep 17, 2015 at 10:02

6 Answers 6

9

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

autofocus: Automatically get focus when loaded. Default value is 'false'

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

Hope this helps - Cheers

Sign up to request clarification or add additional context in comments.

1 Comment

This is not working for the input text inside the UI select. Can you please help?
3

If you want to focus on demand then ui-select offers event broadcast support also. You need to put broadcast event name in focus-on attribute of ui-select and brodcast that event by $scope.$broadcast(...)

<ui-select focus-on="UiSelectDemo1" ng-model="ctrl.person.selected" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
        <div ng-bind-html="person.name | highlight: $select.search"></div>
          <small>
            email: {{person.email}}
            age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
          </small>
    </ui-select-choices>
</ui-select>

Call $scope.$broadcast('UiSelectDemo1'); from button click or any other trigger/event.

Example taken from here.

Comments

2

If you want to make your ui-select focused and opened after initialization:

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>

1 Comment

Only answer that worked for me
0

I had this same issue and needed to add a directive

.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();
            });
          }
        });
      }
    };
  })

then your ui-select add

 focus-me="true"

Comments

0

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

say ui-select is wrapped within div-

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

Controller Method to 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();

Comments

0

Just use built in focus option! In controller put this code in needed method.

            if(yourform.$error.required[0].$$attr.focusOn){
                $scope.$broadcast(yourform.$error.required[0].$$attr.focusOn);
            }

And also define focus prop for ui-select

focus-on="UiSelectDemo1"

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.