ui-select
ui-select copied to clipboard
angular-ui
Leaving the ui-select element does not trigger a "blur" event
The inner input element of the ui-select does generate a blur, but this should bubble up and trigger on the ui-select element itself so that it can be used in form validation, etc.
+1 I know is pain in the neck, but this workaround worked for me https://github.com/angular-ui/ui-select/issues/432#issuecomment-65490071
BTW if you need to use (like me) angular 1.2.x use $watch instead of $watchGroup.
So also in #432, @dimirc added an is-close attribute to the 0.12.0 milestone. That would probably work fairly well for a blur idea. I'm excited to see it in action, personally. I'd rather not have to use a decorator.
None of the suggested workarounds seem to work with the latest version of Angular and ui-select.
My work around for now was to put a watch on the ng-model field that the ui-select is bound to. Then when the value changes I can handle it how I want.
$scope.$watchGroup(['item.Make', 'item.Model'], function (newValue, oldValue) {
if (newValue !== oldValue) {
//Do Something because either item.Make or item.Model has changed.
}
}
Or maybe an OnChange event can be harnessed?
Hope this helps someone out!
Depending on how your model is setup, that watcher can help, but it can add performance concerns. This really needs a blur event, not only to keep things performant, but also to work similarly to other input widgets out there today.
I stumbled upon this and thought it would be helpful and although my issue wasn't exactly the same, I too didn't get any trigger on the "blur" event so hopefully this will point you in the right direction.
I needed to bind "click" and "blur" events for a reusable directive. When adding the directive to a <select> box the "change" event did the trick for me:
app.directive('slideTogglePayment', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click change', function() {
// Code
});
}
};
});
The select box HTML would look like this:
<select ng-model="existingCardId" ng-change="checkoutToggle(orderCart.existingCardId)" slide-toggle-payment="#payment-selection-existing" id="card-existing-selection" ng-options="existingCard as existingCard.NickName for existingCard in existingCards">
<option value="" ng-bind="selectCardDropDown"></option>
</select>
I ended up replacing all of the angular ui-select's with angular- uibootstraps typeahead control because the inability to use the blur event with this control.
https://angular-ui.github.io/bootstrap/
I've come with a workaround to this problem.
app.directive('uiSelectOnClose', function() {
return {
require: '^uiSelect',
restrict: 'A',
link: function(scope, element, attrs, $select) {
if (!attrs.uiSelectOnClose){
return;
}
//get the function from the parent based on the name
//parameters are not supported
var onCloseFn = scope.$parent[attrs.uiSelectOnClose.match(/\w+/g, '')];
if (!onCloseFn){
return;
}
scope.$watch(function(){return $select.open}, function(newValue,oldValue){
if ( oldValue == true && newValue == false){
onCloseFn();
}
});
}
};
});
You can't use the scope to pass the function for this directive because the ui-select directive is already using it, but you can access it from the $parent.
In my project we use a directive with the ui-select and i show a label animation when the user starts entering text into an inputfield. I suppose it can also be used with a blur event:
scope.$watch(attrs.ngModel, (value) => { if (value) { elem.triggerHandler('input'); } }
Why not bind to the blur event on click of the select?
<ui-select ng-click="c.onClick($select)">
onClick($select) {
$select.searchInput.on('blur', () => {
// do stuff
});
}
Maybe somebody can investigate the root cause/ problem and have a good fix in the library? Happy to review the PR.
Thanks
