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.29k stars 6.73k forks source link

unexpected behavior of typeahead #6497

Open Vishal1419 opened 7 years ago

Vishal1419 commented 7 years ago

I have an input using typeahead as follows:

<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" />

And here is the template:


<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>

my units collection has two items:

  1. name=kilogram symbol=kg
  2. name=litre symbol=L

At first look I thought that typeahead works fine.

But when I tried the below key combinations, I found a bug.

Case: 1

Working:

When I type kg in typeahead and hit tab twice, the item.unit property has value:

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kiogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

Not working:

But when I type kg in typeahead and hit escape and then hit tab, the item.unit property has value:

kg

Case:2

Working:

When I type kg in typeahead and hit tab twice the focus goes away from the control. Now item.unit property has value:

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kiogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

And then if I delete the text in typeahead by using delete or backspace key, then if I move focus away from typeahead then item.unit is

undefined.

Not working:

When I type kg in typeahead and hit tab twice the focus goes away from the control. Now item.unit property has value:

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kiogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

And then if I delete the text in typeahead by selecting the text and then using delete or backspace key, then I move focus away from typeahead, then item.unit is still having value:

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kiogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

Plunker:

Here is the link to plunker that reproduces the issue: https://plnkr.co/edit/FIPANC3CcliNOeHHANxF