Typeahead broken with angular 1.3

[23tux]

Hi,

I think this is an angular 1.3 related problem, because everything works fine in 1.2. I tried to use the typeahead directive the following way:

<input type="search" class="form-control" placeholder="Type to search..." 
ng-model="data.search" 
typeahead="title for title in componentTitles | filter:$viewValue | limitTo:8">

When I begin typing, the recommendations are shown, but I can't navigate with the arrow keys (it doesn't highlight the entries provided), and when I click on an entry it isn't copied to the input field.

I had a look into the bootstrap-ui source code, and found out, that the isActive method from the typeaheadPopup directive is not called, which is bind to the ng-class directive on the <li> element of the popup.

https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js#L327-360

In fact, non of the method (selectActive, selectMatch) are called, except the isOpen method. It is called from the ng-if directive on the <ul> element.

I created a plnkr http://plnkr.co/edit/MPTW84KWJ52y8FOUYXZU?p=preview and included angularjs 1.3.bety.15. You can test it by commenting out the angular.js file and use the normal 1.2 files.

Can someone tell me, what has changed so that this doesn't work anymore?

[pkozlowski-opensource]

Yes, we are aware of this. The fix would be to revert this commit: 3111501
I'm going to do it over the weekend and release a new version (0.12.0).

[23tux]

Great, thank you!

[23tux]

Had you already time, to give it a shot?

[ahneo]

Hi, its fixed. Sorry for failing the build.
Changed doublequote to singlequote for strings (as jshint suggested).

On Mon, Jul 21, 2014 at 7:55 PM, Hubert Hölzl [email protected]
wrote:

Had you already time, to give it a shot?

Reply to this email directly or view it on GitHub
#2474 (comment)
.

[ahneo]

Sorry, it failed again. this time to do with typeahead tests.
Not sure what's wrong with them.

On Tue, Jul 22, 2014 at 9:07 AM, Henry Neo [email protected] wrote:

Hi, its fixed. Sorry for failing the build.
Changed doublequote to singlequote for strings (as jshint suggested).

On Mon, Jul 21, 2014 at 7:55 PM, Hubert Hölzl [email protected]
wrote:

Had you already time, to give it a shot?

Reply to this email directly or view it on GitHub
#2474 (comment)
.

[23tux]

If I can help you with anything, let me know!

[23tux]

I think the whole thing is also related to #2293

[ahneo]

yeah maybe.. but to be honest, I am new to these pull issues and
contributions.
Need to setup my own local build too

On Thu, Jul 24, 2014 at 6:08 PM, Hubert Hölzl [email protected]
wrote:

I think the whole thing is also related to #2293
#2293

Reply to this email directly or view it on GitHub
#2474 (comment)
.

[23tux]

Is there anything new about this issue?

[ahneo]

Sorry I haven't had the chance to look into it.

On Tue, Jul 29, 2014 at 11:26 PM, Hubert Hölzl [email protected]
wrote:

Is there anything new about this issue?

Reply to this email directly or view it on GitHub
#2474 (comment)
.

[hesalx]

I've made some research and found out that issue is related to isolated scopes of directives. Seems like some behaviour of isolated scopes was changed.

Eventually, the scope with templateUrl is 'sibling' to the scope of typeaheadMatch and is not the actual scope of typeaheadPopup.
Actual typeaheadPopup's scope is parent of typeaheadMatch's. But initial typeaheadPopup's scope is lost because of replace:true and isolated scope.

(sorry for the low contrast — to many scopes)

I know id:21 is the initial scope because I've logged scope in typeaheadPopup.link(), where templateUrl is assigning. And as debug tools shows id:24 is the scope of popup after rendering.

Not only template is broken. Because of this bug, selecting of matching doesn't work too, selectMatch() function from parent is lost too.

Possible fix may be to do scope.$parent.templateUrl = attrs.templateUrl (and for others needed properties).
Actually, parent of typeaheadPopup (id:20 on the screenshot) contains all of the properties declared in typeaheadPopup.scope... Some angular.js magical mechanics :)

[nivthefox]

I've submitted #2535 as a fix for this. I've confirmed that this does fix the issue with 1.3.0-beta.17. Simple change, but it works just fine.

[hesalx]

Agree.
Just noticed

Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored.
angularjs api

So yes, #2535 should be the actual true fix of the issue.