Select value during onblur event when using typeahead

Question

I have a simple typeahead for a list of currencies. When I start typing and I select the desired value (or hit TAB on that), the desired value is selected - until this point everything works as desired.

However, if I type the entire word and click outside the input instead of selecting the value (onblur event), then even if the value inside my input matches the filter value, the selected scope variable doesn't update, so my input is invalid. What I'm trying to do is to overwrite the selected value during onblur event.

Example: If I type EUR without hitting TAB or selecting the EUR value from the typeahead dropdown and then click outside the input, the EUR text stays inside the input, but selected value is undefined. I want the selected value to hold EUR instead of undefined. I used $viewValue to send the input value during onblur event.

The HTML:

<input type="text" ng-model="selected" typeahead-editable="false" typeahead="currency for currency in currencies | filter:$viewValue" ng-blur="selectCurrency($viewValue)" />
<div>Selected: {{selected}}</div>

The JavaScipt:

angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $scope.currencies = ['EUR', 'GBP', 'USD'];
    $scope.selectCurrency = function(test) {
        console.log(test); //outputs undefined instead of EUR
        //if (checkIfCurrencyExists(test, $scope.currencies)) { - will do the checks later
        $scope.selected = test;
        //}
    };
});

In the JsFiddle below you can see the same scenario, except it has US states instead of currencies. Try to type in Alabama then left click outside the input (don't TAB and don't select the state), you'll see that the selected scope variable stays empty

JsFiddle link here.

Consentient

Do you want to select the first value from the result on blur? – Folium

Thanks for replying, Shashank. Not necessarily, I want to get the value from the input and process it myself. – Consentient

Answer 1

Found an answer myself at the time, but forgot to answer my question here.

Added this to the directive:

data-ng-blur="blur($event)"

And this is the function:

$scope.blur = function(e) {
            var inputCurrency = e.target.value.toUpperCase();
            angular.forEach($scope.currencies, function(currency) {
                if (currency === inputCurrency) {
                    $scope.field = currency;
                }
            });
        };

Consentient

Hi, I used your code but it is not working. Is this really working for you? – Quisling

I tried similar and it does working unlike comment from KCN. I think it's not very simple for everybody to understand maybe because people miss example with link that you provided in other post, but it should be up-voted more times. – Scintillator

Answer 2

Found another solution - setting both typeahead-select-on-exact and typeahead-select-on-blur attributes to true:

   <input typeahead-select-on-exact="true" typeahead-select-on-blur="true" uib-typeahead=...

Typeahead-select-on-exact makes the exactly matching item automatically highlighted in the list, and typeahead-select-on-blur makes the higlighted item selected on blur.

Furnishing

Warm congrats... +5 claps – Siemens

Answer 3

If you want to select the first result from the typeahead list on blur, then you can set typeahead-select-on-blur="true" in your input field as given in the doc.

typeahead-select-on-blur (Default: false) - On blur, select the currently highlighted match.

Folium

Thanks for the suggestion. Unfortunately this doesn't seem to do what I want, I have modified the JsFiddle below to better illustrate the scenario. This example has US states instead of currencies. Try to type in Alabama then mouse click outside the input (don't TAB and don't select the state), you'll see that the selected scope variable stays empty: link – Consentient

Does this answer work for when I click out of the input? – Chelsiechelsy

Answer 4

I spend some time searching for similar question and made a lot of testing untill I got it working. I can see that in answers there is a solution but I try to summarize it so it could be a bit more clear.

In typeahead part include:

<input type="text" ng-model="selected" typeahead-editable="false" typeahead="currency for currency in currencies | filter:$viewValue" ng-blur="checkSelectedValue()" typeahead-select-on-blur="true" />

First part includes validation function of your scope value (you don't need to pass the value as it's the $scope.selected and you can use it in your controller): ng-blur="checkSelectedValue()". Thus include in your controller:

$scope.checkSelectedValue = function() {
  if (code that check if $scope.selected in range of allowed values) { 
    $scope.inputValid=true; //you can use this scope or write code that run when selected a correct value
  } else {
    $scope.inputValid=false; 
}};

Second part: typeahead-select-on-blur="true"// it's necessary since it first will make $scope.selected=selected value from dropdown (complete word) but also a bit weird, but important to know that after typeahead will selected your value it will run ng-blur= "checkSelectedValue()" directive in the end so there it will always check for validation and will set your $scope.inputValid=true or false depending on $scope.selected value.

Aplasia