angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.3k stars 6.74k forks source link

typeahead $viewValue is undefined on select #6628

Open simondrabble opened 6 years ago

simondrabble commented 6 years ago

Bug description:

When an item is selected from the typeahead results list, the specified typeahead-on-select function is called; however, at that time the input's $viewValue is undefined.

Why I care: I'd like to record the search term actually used when a user selects an item from the typeahead results (e.g. they enter 'toy', and then select 'Toy Story', I'd like to record that the input that led to that choice was 'toy'). There are two reasons for this. 1) generating analytics data on which search terms are being used vs what users end up selecting, and 2) when an item is selected, the user is taken to a page specific to that item; I'd like to pass the search term into that page to generate a "similar results" list.

$watching the input's ng-model is not an option since that changes to the selected value upon selection.

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/NXD4oxNhZi0kCdtuDk8i?p=preview

Steps to reproduce the issue:

Follow above plunker.

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8

UIBS: 2.5.0

Bootstrap: 3.7.7 (css only)

simondrabble commented 6 years ago

I've been able to work around this for now with the following:

var watcher = $scope.$watch('search.query', function(nv, ov) {
    $scope.search.entered = nv;
});

$scope.onSelect = function($item, $model, $label, $event) {
    watcher();
    ...
    // Use $scope.search.entered here
    ...
};

but this is ugly and hackish.