how to focus angularjs ui-select input?

Question

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>

Can you provide a jsfiddle demo?

Alberto I.N.J.
– Alberto I.N.J.

2015-09-17 10:02:03 +00:00
Commented Sep 17, 2015 at 10:02 — Alberto I.N.J.
– Alberto I.N.J., Commented Sep 17, 2015 at 10:02

Pasan Ratnayake · Accepted Answer · 2015-09-17 11:10:08Z

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

answered Sep 17, 2015 at 11:10

Pasan Ratnayake

4954 silver badges10 bronze badges

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

1 Comment

vinod Over a year ago

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

Farhan Ghumra · Accepted Answer · 2018-07-20 10:22:41Z

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.

shlensky · Accepted Answer · 2016-03-14 20:35:13Z

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>

answered Mar 14, 2016 at 20:35

shlensky

1,41114 silver badges15 bronze badges

1 Comment

Bilaal Abdel Hassan Over a year ago

Only answer that worked for me

Enkode · Accepted Answer · 2015-09-17 10:07:34Z

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"

answered Sep 17, 2015 at 10:07

Enkode

4,8534 gold badges40 silver badges54 bronze badges

Comments

shubhamkes · Accepted Answer · 2017-05-11 09:44:37Z

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

answered May 11, 2017 at 9:44

shubhamkes

5465 silver badges12 bronze badges

Comments

Andris · Accepted Answer · 2018-07-19 09:08:37Z

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"

answered Jul 19, 2018 at 9:08

Andris

4,2232 gold badges28 silver badges28 bronze badges

Collectives™ on Stack Overflow

how to focus angularjs ui-select input?

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related