Leaving the ui-select element does not trigger a "blur" event

[jdmcnair]

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.

[surabhi-batra]

+1

[jossemarGT]

+1 I know is pain in the neck, but this workaround worked for me #432 (comment)

BTW if you need to use (like me) angular 1.2.x use $watch instead of $watchGroup.

[avrame]

+1

[jaxspades]

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.

[xavierfuentes]

Hi, is there any progress made on this issue? thanks :)

[MiguelMike]

None of the suggested workarounds seem to work with the latest version of Angular and ui-select.

[ghost]

http://plnkr.co/edit/7fSAKmj3pLeeTaid4pMH?p=preview

[shanmugam-siva]

Is there any progress made on this issue?

[itchyny]

I have the same problem :(

[jacobharasimo]

still a problem, any progress?

[ghost]

Still looks like an issue. Going to try ttonyh's workaround.

[joel1618]

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!

[jaxspades]

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.

[mikaeledgren]

+1

[wesleycho]

PRs welcome.

[skashi]

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>

[JoyousTanvi]

+1

[joel1618]

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/

[kenyus]

+1

[MariusCorneschi]

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.

[KrakenTyio]

Any progress???

[nivek91]

+1

[zacyang]

Is this problem resolved or not?

[PatrickBokhove]

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'); } }

[cameronlowry]

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
   });
}

[Jefiozie]

Maybe somebody can investigate the root cause/ problem and have a good fix in the library?
Happy to review the PR.

Thanks

[ady-ghe]

There is any fix yet for this issue ?

[kamilpp]

+1

[marcoskubis]

There are this directive: uis-open-close="onOpenClose(isOpen)"

From Wiki: uis open close.

[VandendriesscheWard]

+1

[chinanderm]

@marcbachmann Thanks! uis-open-close did it for me.

[marcbachmann]

@chinanderm I don't need any credits for that.
you probably meant @marcoskubis 😉