Typeahead broken in angular 1.3.0-rc.1 (even worse, than since beta.11)

[EvAlex]

Example (docs-based): http://plnkr.co/edit/jQSozNWRAbRtrGuOGxb4

Typeahead for states with flags has following bugs (some of them duplicate those reported in other issues, but the last one is new I guess):

• Selecting with mouse doesn't work (this appeared in beta.11 and is already reported in other issues)
• Selecting with arrow keys doesn't work too
• Flags icons not appearing
• Selected object is rendered as '[object Object]'

Just change angular version to 1.3.0-beta.9 and everything gets fine.

[Siyfion]

Agreed, it is very broken. To see this when Angular 1.3.0 is now at release candidate stage is slightly worrying, I hope it gets fixed soon. 😟

[andreychev]

Agreed. More info: angular/angular.js@1eda183

[antoinepairet]

#2602 solved all issues using angular up to 1.3.0-beta.19. It will be part of 0.12
However, with 1.3.0-rc.0 and 1.3.0-rc.1, the Selected object is rendered as '[object Object]'

@pkozlowski-opensource, what is your opinion regarding 1.3.0-rc.x ?

You can have a look at these plunkr:
http://plnkr.co/edit/N7MBdrDF8SAZ8Yo8DVS6?p=preview
http://plnkr.co/edit/gmOcZlb1KOtQm7D34PZZ?p=preview

[chrisirhc]

Interesting find. It looks like in order to support selecting objects you would need to replace that formatter added by the input type using your own directive.

I suggest that we add a directive that does that (replace the default formatter) and add a note for users to add that directive if they need to select objects, when upgrading to AngularJS 1.3.

Replacing the formatter makes assumptions that there are no other formatters added by the user. As such, it's not safe to do this by default for all users. Some users might actually want the coercion to string since it's AngularJS's new default behavior for text inputs.

[SonicGD]

Any news on this issue? We want migrate to 1.3, but this is stopper for us.

[ghost]

For us too.

[ribizli]

Regarding problem with $formatters ([object Object]): setting directive priority to 1 lets Typeahead's formatter run first (with the 'not toString()'d version).

[mpaulucci]

+1 for this issue

[chrisirhc]

Waiting on 1.3 to stabilize a bit more before working on this. angular/angular.js@1064443 , part of 1.3.0-rc.4 has already changed some of the behavior in the original issue (objects no longer renders as [Object object]).

[Siyfion]

@chrisirhc It's just nice to know that the issue will be fixed at some point in the future! 👍

[philippd]

@chrisirhc thanks for the update!

[zenix]

Still broken. [Object object] in value of input line

[robianmcd]

@zenix are you using rc.4? That fixed the issue for me

[zenix]

No, not working :(

http://angular-ui.github.io/bootstrap/#/typeahead <-- example from there is not working. (Custom templates)

[chrisirhc]

I agree that it isn't working 100% right now though I've only looked at it briefly once.

However, please don't update this issue unless you have something productive to contribute (e.g. ideas to get it working, or it's already working). I've already tagged this as something to be worked on and I mentioned above that it won't be worked on until later when 1.3 is more stable. Since it's not being worked on, it's unlikely to work.

I believe that anybody should be allowed to voice out contribution.

The noise of unproductive comments drives busy collaborators away from paying attention issues as they unsubscribe from them. This makes it less likely that the issue gets fixed in the earliest possible. It also dilutes the voices of people who actually want to contribute.

Another point of note: Please describe what isn't working. If you're too busy to make a Plunker, even a simple description like "I typed in something and nothing happened". Of course, the more details the better. Otherwise, simply saying it's not working with no details isn't going to get much attention because collaborators don't want to spend an evening guessing what went wrong, and hence won't bother with the issue.

Help us help each other and help you, users. Most of us are users of the library too and we are concerned if things are broken.

[dholth]

I was disappointed that the typeahead custom template broke in Angular 1.3.1. I tracked the issue down to https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js#L374

var tplUrl = $parse(attrs.templateUrl)(scope.$parent) || 'template/typeahead/typeahead-match.html';

The $parse call evaluates to scope.$parent.templateUrl

In Angular 1.2, scope.$parent.templateUrl is the url of my custom template.

In Angular 1.3, scope.$parent.templateUrl is undefined.

It is still possible to get the URL from the great-grandparent scope scope.$parent.$parent.$parent.templateUrl.

Perhaps Angular 1.3 changes the way scope inheritance works, or creates isolated scopes for some of the intermediate typeahead elements.

Another problem I may have been having was that my application's copy of typeahead-popup.html wasn't up to date with angular-ui-bootstrap's version.

[rupe120]

Looks like a real fix for this one will need to wait for updated input and ngModel. In the mean time a work around is to the pull request that I submitted and then modify the Typeahead control to call modelCtrl.$formatters.removeByFnName("stringBasedInputTypeFormatter").

The way I used it was in the Typeahead formatter

      modelCtrl.$formatters.push(function (modelValue) {

        // Ensure the string formater is removed if the modelValue is not a string
        if (typeof (modelValue) != "string" && typeof (modelValue) != "undefined") {
            modelCtrl.$formatters.removeByFnName("stringBasedInputTypeFormatter");
        }

        var candidateViewValue, emptyViewValue;
        var locals = {};
        ...

Alternatively you can probably just test for the type being equal to "object" but this is what I have in my project.

The changes to Angular are currently breaking the unit tests but I wanted to put this out there as an option and it seems to be functional in the current project I'm working on.

[rupe120]

Ok so I've found a better way to work around this bug. I'm no longer using the hack I referenced above. You can just use the typeahead-input-formatter attribute instead. Just make sure it references the scope property, in this instance user.client. Here is an example

<input id="Text1"
       type="text"
       name="client"
       typeahead="client as client.name for client in clients"
       typeahead-min-length="0"
       typeahead-input-formatter="user.client.name"
       ng-model="user.client"
       ng-disabled="formDisabled"
       class="form-control"/>

[rwillmer]

Could the OP confirm whether this is still broken now AngularJS 1.3 is released? (currently at 1.3.11)

[antoinepairet]

According to tests I just performed, using angular stable version 1.3.13, it works correctly. Here are the plunkers:
http://plnkr.co/edit/4i5qJYlyCrE4bWkvBV20?p=preview - working using 1.3.13
http://plnkr.co/edit/gmOcZlb1KOtQm7D34PZZ?p=preview - broken using 1.3.0-rc.0

[karianna]

In that case, closing (it's not unreasonable to expect people to be using an up to date version of Angular).

[jdforsythe]

The plunkr by antoinepairet for 1.3.13 is NOT working - at least in Chrome. Selecting with mouse or keyboard does not work. You can press Tab to select the first item in the list and it correctly sets the object to the model. You can select from the dropdown and it sets the object to the model. But mouse and arrow keys don't work (although clicking closes the list, it doesn't set the model). States with flags doesn't work either, and still doesn't work in 1.3.14.

[wesleycho]

Closing this issue, moved keyboard/mouse issues to #3393.