Open in focus tabs before ui-select
2 answers
Try this if you're looking for a quick workaround:
app.directive('showOnFocus', function() {
return {
restrict: 'A',
link: function (scope, element) {
var focused = false, opened = false;
var select = element.children('.selectize-input');
var toggleInput = element.find('input')[0];
var onfocus = function(){
if(!focused && !opened) {
toggleInput.click();
opened = focused = true;
} else if(opened) {
opened = false;
}
};
var onhover = function(){
if(!focused && !opened){
toggleInput.click();
opened = focused = true;
};
};
var onblur = function(){
focused = false;
};
element.bind('mouseenter', onhover);
element.bind('click',onblur);
select.bind('blur', onblur);
select.bind('focus', onfocus);
//show on pageload
onhover();
}
};
});
And apply the directive in the ui-select element
<ui-select show-on-focus>..</ui-select>
Hope it helps.
+1
source to share
The showOnFocus directive didn't work for me. I added an additional input (hidden but not invisible), focused, and disabled the tabindex ui-select.
<custom-directive>
<input class="custom-focuser" tabindex="0" style="left: 10000px"/>
<ui-select tabindex="-1"/>
</custom-directive>
Then, in the custom directive link function, I bind to the secondary input focus event.
app.directive('customDirective', function () {
return {
// ...
link: function ($scope, el, attrs, ctrl) {
el.find('.custom-focuser').focus(function (event) {
//your custom logic here
});
}
};
});
0
source to share