CODEWITHSUNDEEP
angularjsblurui-select
Csizzle
Csizzle

Reputation: 215

Angular ui-select choose on blur

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.

Upvotes: 2

Views: 3926

Answers (1)

Ryan Silva
Ryan Silva

Reputation: 965

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)

Upvotes: 7

Related Questions