My input field uses typeahead functionality like this:
<input type="text" id="unit" name="unit" class="form-control form-input" ng-model="item.unit"
autocomplete="off"
typeahead-min-length="0"
uib-typeahead="unit as unit.symbol for unit in units | typeaheadFilter:{'symbol':$viewValue} | orderBy:smartOrder"
typeahead-template-url="unit-template.html" />
Here is the template used:
<script type="text/ng-template" id="unit-template.html">
<a tabindex="-1">
<div class="row">
<span class="col-md-6 col-sm-6" ng-bind-html="match.model.symbol | uibTypeaheadHighlight:query"></span>
<span class="col-md-5 col-sm-5 col-md-offset-1 col-sm-offset-1" ng-bind-html="match.model.name | uibTypeaheadHighlight:query"></span>
</div>
</a>
</script>
The units collection consists of two items:
name=kilogram symbol=kg
name=litre symbol=L
Initially, it seemed that the typeahead was functioning correctly.
However, upon testing the following key combinations, a bug was discovered.
Case: 1
Working:
Entering 'kg' in the typeahead and pressing tab twice results in the item.unit property having the value:
Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}
Not working:
However, entering 'kg' in the typeahead, pressing esc, and then pressing tab leads to the item.unit property having the value:
kg
Case: 2
Working:
Entering 'kg' in the typeahead and pressing tab twice causes the focus to leave the control. The item.unit property now holds the value:
Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}
If the text in the typeahead is deleted using delete or backspace, and the focus is moved away, the item.unit becomes:
undefined.
Not working:
Entering 'kg' in the typeahead, pressing tab twice for the focus to go away, and then deleting the text using delete or backspace keeps the item.unit value as:
Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}
An issue has been reported on their GitHub page.
Plunker:
For a demonstration of the issue, visit the following link: https://plnkr.co/edit/FIPANC3CcliNOeHHANxF