Search code examples
angularjsbootstrap-typeaheadangular-strap

Angular Strap typeahead popover displaying in wrong position

I am using angular-strap 2.3.9. And using following code for bootstrap typeahead:

<input type="text" class="form-control" ng-model="list" bs-options="val.description as val.description for val in listValues" ng-blur="checkFunction()" limit="10" bs-typeahead>

When I type the first character in the text box, the popover appears in the right bottom of the screen (screenshot 1 - typeaheadIssue). But for the second character on wards, the popover displays correctly below the text box (screenshot 2 - typeaheadIssue1).

I have tried using angular-strap 2.2.4 which works fine, but angular-strap 2.3.8 creates this issue. Is this an open issue or any update has been released with this fix?

Please check the attached screen shots for the reference:

Screenshot 1:

enter image description here

Screenshot 2:

enter image description here

Solution

  • I have replaced angular strap typeahead as follows:

    <input type="text" class="form-control" ng-model="list" typeahead="val.description as val.description for val in valueListValues | filter:$viewValue | limitTo:10" ng-blur="checkFunction()" >

    It solved the issue.