ng2-ui / auto-complete

Angular Auto Complete component and directive
https://ng2-ui.github.io/dist/#/auto-complete
MIT License
279 stars 123 forks source link

Set autofocus when we have a selected item #272

Closed Steven-Garcia closed 7 years ago

Steven-Garcia commented 7 years ago

This is not so much an issue as a feature request, but could be considered both ways

Lets say we setup an auto-complete like this:

Steps to reproduce and a minimal demo

 <input  ngui-auto-complete
                   [formControl]="continent"
                   [source]="continents"
                   [list-formatter]="autocompleListFormatter"
                   value-property-name="id"
                   display-property-name="name"
                   placeholder="Contients"
                   class="form-control"
                   tab-to-select="true"
                   (keyup.enter)="search()">

http://plnkr.co/edit/ezq5Q6?p=preview

Current behavior

So the user should be able to navigate comfortably without using the mouse to select nor to execute onClick functions, but the issue here is that the input box doesn't have focus, not on mouse selection, not on tab selection, it actually moves on to the next UI item when hitting tab (it does its job by selecting the appropriate item, but focus jumps on to next item)

Expected/desired behavior

It would be ideal to have the focus stay on the input element all the time the user has selected an item, via mouse click &/0r enter, it would be much more user-friendly and intuitive

allenhwkim commented 7 years ago

When focused, the registered behaviour is to display autocomplete dropdown menu. Thus, when user select an item, to refocusing to the input element may cause to display dropdown menu again, which is not ideal.

Any suggestion to overcome this(focused but conditionally not to show dropdown) would be appreciated.

Steven-Garcia commented 7 years ago

I wish I had the knowledge, and I would definitely jump in with coding, but I'm very junior, all I can do is compare against other libraries I've used and suggest something similar.

In the old uib-typeahead it displayed the dropdown once the user started typing, not on focus only, once the user selected an item from the dropdown list, the dropdown disappeared, but the focus remained in the input box, however not displaying the dropdown

allenhwkim commented 7 years ago

I have made change and released, plz check.

Steven-Garcia commented 7 years ago

Hi, I've been trying to integrate the latest version from npm, but it won't take me any further than 0.13.8, I assume that by doing npm install @ngui/auto-complete --save it should install the latest version?

Steven-Garcia commented 7 years ago

Ok, managed to sort that by manually changing version in package.json and then running npm update

The change is awesome!! Thank you for that!!

Soadfan commented 5 years ago

Hey ! is it possible to publish the new versions on npmjs please? https://www.npmjs.com/package/ng2-auto-complete Last one is version 12.

We are on angular 4 so if it's possible to publish not only the most recent ones but also the others, it would be kind.

Thanks in advance.