on blur select

[Kepro]

it is possible to select value on blur? now users need to

1. Enter the name in the box
2. Click on the the keyword in the drop-down list to confirm or press enter

But actually users tend to forget the second step above and after entering a desired name, they will click on other space to do following jobs. But if then, the name users just entered will be removed and jump back to the default value. It wound be a little annoying if such case happens.

[user378230]

You could try something like this:

app.directive('selectOnBlur', function() {
  return {
    require: 'uiSelect',
    link: function($scope, $element, attrs, $select) {
      var searchInput = $element.querySelectorAll('input.ui-select-search');
      if(searchInput.length !== 1) throw Error("bla");

      searchInput.on('blur', function() {
        $scope.$apply(function() {
          var item = $select.items[$select.activeIndex];
          $select.select(item);
        });
      });
      // don't forget to .off(..) on $scope.$destroy 
    }
  }
});

http://plnkr.co/edit/Hydhel0iqB0gc5VgeMS8?p=preview (first input)

It's a 5 minute attempt but you could probably tidy up and check for edge cases etc. as necessary. If you do improve on it, be sure to update us here - someone else might find it useful.

[Kepro]

thanks!

[rysilva]

FYI for anyone looking at this, the solution suggested by @user378230 has a bug: if you have multiple choices in the dropdown and you click one of them, the blur event will fire before the dropdown item click event and it'll tokenize the typed text and not the clicked item.

The problem is you can't tell from the blur event whether the mouse event causing the blur occurred inside or outside the ui-select component. The alternative is to use a click event instead of a blur event. You can set up a click handler on the document and select the active item if the click occurred outside of the root ui-select node. The problem now is that it's likely your event handler will occur after the ui-select's document click handler which is used to close the dropdown, and the dropdown will be closed by the time your selectOnBlur code runs. The fix (which I don't love but works) is to attach the click handler on document.body so it will get run before ui-select closes itself.

The following works for me:

app.directive('selectOnBlur', function($document) {
  return {
    require: 'uiSelect',
    link(scope, elm, attrs, ctrl) {
      let body = $document[0].body,
        handleClick = (evt) => {
          //Look for elm (the ui-select root element) somewhere in the ancestors
          let target = evt.target;
          if (elm === target) {
            return;
          }
          while (target.parentNode) {
            target = target.parentNode;
            if (elm === target) {
              return;
            }
          }

          //Did not exit, therefore user clicked outside of the ui-select
          //only select if open and something is typed
          //Check ctrl.items also, because for ui-select with fixed data, if all possible entries
          //  have already been selected then activeIndex will = 0 but items will be [].
          if (ctrl.open && ctrl.search &&
            (ctrl.items && ctrl.items.length) && (
            ctrl.tagging.isActivated || ctrl.activeIndex >= 0)) {
            ctrl.select(ctrl.items[ctrl.activeIndex]);
          }
        };

      body.addEventListener('click', handleClick);
      scope.$on('$destroy', () => {
        body.removeEventListener('click', handleClick);
      });
    }
  };
});