2

I'm using ui-select, and would like to select the first option in the list when the user clicks away from the input (ie a blur event on ui-select-search). Currently, the select box remains open until the user tabs out or makes a selection.

Csizzle
  • 215
  • 3
  • 10
  • To further discussion, I tried wrapping the element in the directive posted by tonyh on this page: https://github.com/angular-ui/ui-select/issues/432#issuecomment-65490071 The events that return do not seem to correspond to what might ordinarily be considered a blur/focus event. – Csizzle Apr 02 '15 at 20:08
  • Looking at binding a function to the .ui-select-search text box associated with the select, so that when it blurs, the first item will be selected (which will always match user input, as it is created as the first element in the array returned from the refresh function). Searching under the hood for the api to select the first item next. – Csizzle Apr 06 '15 at 19:03
  • Check out this solution, it worked for me! [https://stackoverflow.com/a/45990035/3040886](https://stackoverflow.com/a/45990035/3040886) – Ronny Shibley Aug 31 '17 at 21:09

1 Answers1

7

You can add another directive to the ui-select element like so:

<ui-select select-on-blur ...

Then implemented like this: (the 'if' is copied from the _handleDropDownSelection method)

.directive('selectOnBlur', function() {
    return {
        require: 'uiSelect',
        link: function(scope, elm, attrs, ctrl) {
            elm.on('blur', 'input.ui-select-search', function(e) {
                if(ctrl.open && (ctrl.tagging.isActivated || ctrl.activeIndex >= 0)){
                    ctrl.select(ctrl.items[ctrl.activeIndex]);
                }
                e.target.value = '';
            });
        }
    };
})

(note: this only works with jquery, without jquery you'll need to select the input a different way)

Ryan Silva
  • 925
  • 2
  • 9
  • 17