AngularJS Bootstrap UI Typeahead Not Working Properly with Custom Popup Template

Question

I'm working on a .NET MVC application that has some AngularJS pages in it. I'm trying to use Bootstrap UI Typeahead but it's not quite working properly.

If I start to type in the textbox the autocomplete popup opens with potential matches:

However, if I click on one of the matches nothing happens and the underlying angular model is not updated:

The really strange thing is that if I hit tab while the popup is open the first match will get selected and the angular model is updated appropriately:

This is the template I'm using:

<script type="text/ng-template" id="customTemplate.html">
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0"> 
    <ul>
        <li  ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match">
            <div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div> 
        </li>
    </ul>
</div>

This is the relevant front-end code:

<section class="mos intro" data-ng-controller="MosConverterController as vm">
<div>
 <form ng-submit="GetCareers()" class="form form--mos">
            <div class="form__row">
                <div class="form__col form__col--half-plus">
                    <label for="MOS" class="form__label">MOS/Rate/Duty Title</label>                    
                    <input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required>

                    <div>Current Search Term: {{vm.model.SearchTerm}}</div>
                    <textarea>{{vm.model.CareerResults}}</textarea>
                </div>
            </div>
    </form>
</div>

Here's our angular model. Note that we're using Typescript in this project:

import {MosConverterSearchResult} from "../models";

export class MosConverterModel implements Object {
    SearchTerm: string = null;
    CareerResults: MosConverterSearchResult[];
    SelectedCareer: MosConverterSearchResult;
}

I followed the tutorial from the Angular Bootstrap documentation here for the "Custom popup templates for typeahead's dropdown" section but I can't figure out what I'm doing wrong. I'm sure it's something simple but I just can't figure it out. I should note that adding ng-click to the li element like they have in the tutorial doesn't fix the issue. I've tried it like this before:

        <li  ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)">  
            <div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>                 
        </li>

Bruno · Accepted Answer · 2016-12-02 14:37:17Z

0

After banging my head against my desk for a couple of hours I figured out the issue was the ng-if in my template. The example in the tutorial link I posted above uses ng-show. ng-if destroys the DOM element and destroys its scope in the process. That's why nothing would happen when I clicked on an item from the list. Not sure why the tabbing would work though if this was indeed the case. If anyone knows please add a comment or better answer.

answered Dec 2, 2016 at 14:37

Bruno

5631 gold badge6 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Bootstrap UI Typeahead Not Working Properly with Custom Popup Template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related