Programatically focus the select (but not activate)

[pietschy]

Hi there,

I'm trying to figure out the the best way to focus the select when my page is displayed. In hunting around there's a uiSelectCtrl.activate() method but no equivalent for focus. In digging around HTML5 has an autofocus attribute but wasn't if that would make sense in SPAs or provide much value over a programatic focus mechanism.

I'm happy to do a pull request, but given I'm fairly new to angular, do you have any suggestions for approaching this?

Thanks!

[enkodellc]

I might suggest to look at this directive to help you out. I used it for a modal dialog to focus on a button so if the user hits enter after the dialog pops up it will close.

http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field

[adharris]

In case anyone still needs this:

uiSelect uses a focusser, pretty much a dummy text entry whose purpose is to listen for focus events. It's set as the focusser property of the controller. Easiest way to focus the element would be just to focus the focusser:

// get the ui select controller
var uiSelect = angular.element(<the ui select DOM element>).controller('uiSelect');

// focus the focusser, putting focus onto select but without opening the dropdown
uiSelect.focusser[0].focus();

// Open the select without focusing the search box.  I use this on mobile to
// prevent keyboard from popping up automatically when clicking into the box
uiSelect.open = true;

// Open the select and focus:
uiSelect.activate();

[jossemarGT]

You rock @adharris !

[surabhi-batra]

@adharris, new to web programming, would appreciate any help.
The signature of the uiSelect.activate() method is - activate: function (initSearchValue, avoidReset)
Does it work for you without parameters?

[adharris]

@surabhi-batra yes it does work for me without parameters.

The first parameter, initSearchValue is a string that is put into the search box upon opening. So if you call ctrl.activate('apple') the list will be pre-filtered on the string "apple". Omitting this parameter will initialize the search to the empty string.

The second parameter avoidReset, seems to prevent the search box from being cleared when initSearchValue is missing or falsey. So calling ctrl.activate(false, true) would open the drop down and focus the search, but would not clear out any contents the user had already put in the search during a previous interaction with the select.

I was also asked how to get a reference to the uiSelect dom element as required by my first post. This is slightly tricky because uiSelect uses a directive's compile function to remove the html from the dom and replaces it with the templates. This means you cant do something like .find('ui-select'). The way i do it, which may not work for all use cases, is to wrap the ui select in a div, and then use .children to get the child elements. I do this in a directive like such:

app.directive('uiSelectWrapper', function() {
    return {
        link: function(scope, element, attrs) {
            var uiSelectController = element.children().controller('uiSelect');
        }
    }
});

and then

<div ui-select-wrapper>
    <ui-select>
        ...
    </ui-select>
</div>

[surabhi-batra]

Thanks a lot @adharris!

[MWalid]

@adharris You saved my day... thanks 👍

[kimardenmiller]

@adharris, just for clarity, when you further add the uiSelectWrapper, what do you do with the <the ui select DOM element> line to match that? That's where you want to get a reference to the uiSelect dom element as required by your first post?

[kimardenmiller]

I guess @surabhi-batra and @MWalid got this working? Using the wrapper:

.form-group ng-controller='HubController' 
    div(ui-select-wrapper)
      ui-select class='vote_hub' ng-disabled='disabled' ng-model='hubFilter.selected' on-select='setHub($item, $model); finishProp()' reset-search-input='false'
        ui-select-match id='vote_hub' placeholder='Who should see your proposal? ...' ng-enter='finishProp()' {{$select.selected.full_hub}}
        ui-select-choices refresh='refreshHubs($select.search)' refresh-delay='0' repeat='hub in hubs track by $index'
          div ng-bind-html='hub.full_hub | highlight: $select.search'

For some reason both those console.logs come up undefined: .controller('uiSelect') at the directive level:

uiSelectWrapper = ->
  link: (scope, element, attrs) ->
    uiSelectController = element.children().controller('uiSelect')
    console.log 'uiSelectController: ', uiSelectController
    uiSelectController

and focusser[0] at the controller level:

  uiSelect = angular.element 'ui-select-wrapper'
  console.log 'uiSelect: ', uiSelect.focusser[0]

Suggestions?

[rogerfar]

When opening the select list with .activate() the focus won't be put on the searchbox, is this a bug or expected behavior?

[kimardenmiller]

@rogier21 , you were able to get a hold of the controller then using the wrapper above?

[rogerfar]

@kimardenmiller yeah, the code works, I did exactly as adharris commented on Dec 11, 2014. But it doesn't focus the search after opening.

[kimardenmiller]

You tried uiSelect.focusser[0].focus()?

What version are you on?

[rogerfar]

Latest release: Version: 0.9.6 - 2015-01-12T20:24:40.589Z