Angular 1.5.0 and autocomplete [enter] keypress not working

[dkomando]

Pressing the [enter] button no longer selects the highlighted entry using Angular 1.5.0.
However, [Tab] still seems to work fine but [enter] ends up closing the suggestionList before the plugin is able to select the highlighted option in which it only makes what was typed in the entered tag.

I have confirmed this on Mac FF & Chrome.

[duncangrist]

I'm experiencing this as well, having also commented on #625

For me, it seems to be caused by a change in the registration order of the input-keydown event on both the editor and the autocomplete dropdown; the order has been reversed in Angular 1.5. This causes the editor to receive the ENTER key press before the autocomplete dropdown, closing the dropdown and simply creating a tag based on the partial string you've typed (just as it would if the autocomplete dropdown wasn't being used).

[duncangrist]

I've created a Plunker which reproduces the issue: http://plnkr.co/edit/1ekFvs?p=preview

[duncangrist]

PR added with potential fix.

[dkomando]

@duncangrist while your PR fixed the [enter] keypress if I hit [tab] to select the autocomplete selection it adds my selection [fake name x] and an empty tag [x] with my first tab selection only once. If I try to hit tab again it all works as expected but with a small delay.

Thanks for looking into this!

[duncangrist]

@dkomando, I can't reproduce that behaviour in either my app, or the test-page which comes as part of the ng-tags-input project.

Perhaps I'm misunderstanding you but, if I type a few characters of a tag, select the correct entry in the autocomplete drop down using the cursor keys and then hit [tab], the entire tag is correctly substituted into the editor with no discernible delay that I could notice.

I've uploaded a short video of me doing this here:
https://drive.google.com/file/d/0B5UR4Uii6zboNUtpWVFHT0d3T28/view
Every tag was added to the input using [tab].

[dkomando]

@duncangrist, Here is what it looks like on the latest version of Chrome on the Mac.

I hit [enter] for the first one and [tab] every time after. I also now see that I can't add more than a couple without it being added but hidden. Once I have entered all that are available I click in the box and start hitting [backspace] after a while it finally reaches the view able tags and deletes everything in the input.

https://drive.google.com/file/d/0B6a7QRHsq93oM0tBMDZiOVBtc0k/view?usp=sharing

My basic controller that I am using:
<script> angular .module('tagTest', ['ngTagsInput', 'ngResource']) .constant('ServerAPIConn','http://localhost:8080/_data/the_fake_data.json') .controller('theController', function($scope,$http,ServerAPIConn) { $scope.loadTags = function(query){ var config = { params: { 'search': query }, cache: true, headers : { 'Accept': 'application/json' } }; return $http.get(ServerAPIConn,config).then(function(response){ var nameArr = []; angular.forEach(response.data.results,function(v,k){ nameArr.push({'id': v.id, 'text':v.first_name+' '+v.last_name}); }); return nameArr; }, function(response){ console.log('Nothing Returned: ',response) }); }; }) </script>

[duncangrist]

That does indeed look very strange!

I've created a new Plunk with your controller implementation, and I still can't reproduce...
http://plnkr.co/edit/1ekFvs?p=preview

Thinking it may be something else about your application environment? Can you edit that plunk to a point where it behaves like your video?

[dkomando]

Actually your Plunker works perfect for me so must be something I setup wrong. Going through your Plunker now to see what is making the difference.

[kikhtenko]

I have the same issue... here are two examples
http://plnkr.co/edit/uE4y3kiHci9HogNvCVmt?p=preview
and
http://plnkr.co/edit/JQoMqdlsHHVEVVFzJ6hC?p=preview
the only difference is angular version linked.

try to enter 'tag' and hit Enter. You'll get 2 different behaviors. I tried Chrome and IE - the same issue

[kikhtenko]

...and in FF also

[chrillewoodz]

Just use 1.4.9 and it works fine.

[kikhtenko]

Sorry, but I use components which aren't supported in 1.4.9

[thomaux]

Same issue here, running Angular 1.5

[nav12neo]

angular 1.5 is the main issue. any idea how to fix it without modifying the plugin.

[Mattchewone]

I too am hoping for a fix soon. I am assuming its a change in the way the enter event is triggered on the autocomplete suggestion. It seems to me the enter event is being triggered on the input rather than the match.

[shyamal890]

@mbenford Can you please have a look at this issue?

[eugeniol]

+1

[yerfinojul]

+1

[lancecaraccioli]

+1

[str1fe]

+1

[ricardoreiter]

+1

[Oldwo1f]

+1
I think this is related to #593 and #599
and there already exist one PR 9866a78

That fix it but the PR isnt merged yet

[htakemoto]

setting add-from-autocomplete-only="true" in tags-input tag worked.
tested on angularJS 1.5.5.

[shyamal890]

@mbenford How to obtain these commits through bower?

[davidamitchell]

@mbenford that change works a treat, any plans on a new version being released (npm, bower, zip)?

[mbenford]

@shyamal890 @davidamitchell I'll try my best to release a new version on all distribution channels later this week. But the latest build generated by Travis is always available to download.

[davidamitchell]

@mbenford thanks that is good to know, I had assumed that was the 3.0.0 version. downloading now....

[DanLippold]

+1 Would love to have this fix available in bower. Thanks @mbenford

[lennykean]

any word on when the fix will be available on npm?

[Oldwo1f]

no news

2016-05-25 21:21 GMT+02:00 Lenny Kean [email protected]:

any word on when the fix will be available on npm?

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#638 (comment)

Cordialement,

Alexis Momcilovic - www.momcreation.fr

[varmas]

...still waiting...

k thx bye

[mbenford]

Just so you guys know, version 3.1.1 has been released earlier today on all distribution channels. v3.1.0 has a bug that affects applications using Angular prior than 1.5.x, so don't use it.