CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
ASR
ASR

Reputation: 471

Angular uib typeahead, typeahead-is-open not working

I have a angular uib-typeahead. Here is a link to plunkr that I created.https://plnkr.co/edit/8XwhSXsZlyd0oKSljS9t?p=preview.

I have used typeahead-is-open property.

What I want is when I click on the uib-typeahead it should open and display all the values. I am assuming setting the typeahead-is-open to true does this job. Is this correct? Currently the typeahead does not open up on setting typeahead-is-open to true.

Here is my html

<input ng-click = "myFunc()" click-outside="typeaheadIsOpen = false;" type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-is-open="typeaheadIsOpen" class="form-control">

My JS

$scope.myFunc = function() {
   $timeout(function() {
       $scope.typeaheadIsOpen = true;
       $scope.$digest();
   })
}

I have bound the typeahead-is-open to "typeaheadIsOpen" variable. On clicking on the typeahead I invoke myFuc() which sets the variable typeaheadIsOpen to true.

But the typeahead does not open. Is there something I am doing wrong?

Upvotes: 2

Views: 2762

Answers (2)

Adam Hughes
Adam Hughes

Reputation: 16309

Sadly, I'm still using angularjs in 2021. I ended up finding a hack based on these threads on it

https://github.com/angular-ui/bootstrap/issues/6619 https://github.com/angular-ui/bootstrap/issues/759

Given a typeahead input

<input class="form-control address_input" 
       type="text"
       typeahead-editable="true"
       typeahead-on-select=...

In the controller in angular that handles this, I created a function like this

function _forceDropdownOpen() {
    const controller = $(".address_input").controller('ngModel');
    const old = controller.$viewValue;
    controller.$setViewValue(old +' ');
    controller.$setViewValue(old);
}

It simply mimicks adding space to the result and then removing that space.

Here is an example of my app before and after. My use case was after the third letter typed, my code sends an HTTP request. When that request returns, and if it has results, I call this method to open the dropdown.

Before: dropdown does not open until a fourth letter is typed

After: opens immediately on results

enter image description here

Upvotes: 0

Max Koretskyi
Max Koretskyi

Reputation: 105489

It seems that you can't control whether the typeahead popup is shown or not using typeahead-is-open attribute. Here is the relevant part from source code:

UibTypeaheadController

//binding to a variable that indicates if dropdown is open
var isOpenSetter = $parse(attrs.typeaheadIsOpen).assign || angular.noop;
...
scope.assignIsOpen = function (isOpen) {
    isOpenSetter(originalScope, isOpen);
};

This attribute is used to obtain expression used to update the scope when typeahead is open, but is not used to get value from scope and no relevant watcher is setup.

Upvotes: 6

Related Questions