CODEWITHSUNDEEP
javascriptangularjsangular-ui-typeahead
Pablo
Pablo

Reputation: 10602

How to know when user stop editing autocomplete field in angularJS

I have an input with an autocomplete of angular-ui-typeahead.

The user start typing, and they can choose an option from the autocomplete, or type the text that is not listed.

If the user does not use the autocomplete, I must change the text of a label, saying that this element will be added

<input
    ng-blur="checkIfNewProvider()" 
    ng-model="providerSelected" 
    uib-typeahead="provider as provider.name for provider in providers | filter:$viewValue | limitTo:8" placeholder="{{ 'new-product.provider.placeholder' | locate }}" 
/>

I was checking on the blur of the field if the option choosed was or not on the autocomplete.

The problem is that, when the user click on the option menu that the autocompelte shows, the blur is triggered, and the label changed.

After leaving the field again, the blur is triggered again, and the label text is fixed.

What event can I trigger, or what can I do to fix this?

Upvotes: 0

Views: 651

Answers (1)

DonJuwe
DonJuwe

Reputation: 4563

You could use the directive's attribute typeahead-on-select($item, $model, $label) which triggers your function when selecting an element fromt the dropdown:

    <input 
        type="text" 
        ng-blur="blur()" 
        typeahead-on-select="blur()" 
        ng-model="selected" 
        uib-typeahead="provider as provider.name for provider in providers | filter:$viewValue | limitTo:8" class="form-control">

Another attempt, but not really suggested, would be to $watch the model and check if it matches an element from your array.

Upvotes: 0

Related Questions