Proposition for typeahead : Open suggestion view on focus

[jdecool]

It could be interresting to automatically open the suggestion view when the input field has focus.

It will allow user to see choices it can make when a filter is used and the list is not editable.

What do you think about ?

[pkozlowski-opensource]

So, I think that there was a brief discussion about something similar. The problem is that semantic of such thing gets very tricky very fast.

One of the main design assumptions of the current typeahead directive is that it should work seamlessly with promises (with any typeahead suggestions to be retrieved asynchronously, usually from a server side). Now if we take this into account the question is - what should be shown in the opened popup? If the input is empty what should we send as a query to the server?

I guess this is not super-common use case for the typeahead directive and as such I would prefer no to add more code / complexity to the directive itself. What I would rather look at is a way of making sure that such functionality can be pluggable. I'm starting to think about refactoring the current directive to use an internal controller so people can plug into the directive.

If I'm not mistaken it should be possible even today to write a simple directive that would listen to the focus event and write a value to the $viewValue - this would trigger the popup window opening.

@jdecool Could you give a separate directive a try? I would be keen to refactor the existing typeahead directive so custom / additional behavior is easy to plug.

[sanfords]

I'd like to second the suggestion to show the popup on focus if typeahead-min-length == 0. I've read some of the discussions. Popping up on focus will allow the user to see what kinds of choices are available before they type. Right now there is no way to do this. Adding this capability makes the popup a little more like a traditional <select> popup menu, but not too much. :-) Alternatively, showing the popup on keyboard-arrow-down would also be good, and would be consistent with combo-boxes on PCs.

With your $viewValue idea to show the popup on focus from a directive, what value should be written? Just an empty string? (I'm a little new to all of this.)

(Thank you for your efforts on this and other parts of ui-bootstrap!)

[jdecool]

It's a very interresting idea to allow user to plug an internal controller into the directive to extends functionnalities !

I also agree with @sanfords that displaying suggestion view on focus, is similar to have a typeahead-min-length=0.

Right now, I'm going to try to add a directive to catch the "focus" event.

[sanfords]

jdecool, thanks for working on that directive!

I put together two sample apps on another platform to see how a typeahead would "feel" with showing popups on focus. One popped up on focus, and the other popped up on "keyboard down-arrow". I preferred "down-arrow". I guess this could be easily done with the same directive, right?

The select2 control also uses down-arrow to show choices. Has down-arrow become a standard for showing options in typeahead-like controls? At some point this may be what the users expect.

[jdecool]

I have tried to use select2 in my app. The disavantage of the library is that user have to do an action to view type of result. So I try to make an UI which can be use only with keyboard et the most intuitive as possible.

Basic users don't know that they have to press the "down-arrow" to show suggestions. By opening the list on focus, user is guided.

[sanfords]

So I think there's a case to be made for both. First is showing the popup on focus: This would be good for, say, a country popup where a one-time user will need to see the choices immediately. Second is the user who doesn't need to see all the options immediately because they have experience with the form, or the typeahead field is one of 10 fields on the page and don't want the popup flashing in front of them as they tab around.

[bkc]

hello, has there been any more thought/work towards opening the pop-up when minlength=0 and focus event is fired? I really need this.

thanks

[cindoum]

To open suggestions on keydown 40

(version 0.6) You can try this workaround : first instruction in link function replaced by
var minSearch = originalScope.$eval(attrs.typeaheadMinLength || '1');

And in the keydown event, add this test before the first one (become if / else if) :
if (scope.matches.length === 0 && evt.which === 40) {
modelCtrl.$setViewValue(modelCtrl.$viewValue);
}

In unshift function, first test become :
if ((inputValue && inputValue.length >= minSearch) || (minSearch === 0))

It wont break anything and will open the suggestion popup when you hit down arrow on an empty input

[sanfords]

cindoum, wonderful. This should be in 0.7.

[cindoum]

Glad it can help you. I am actually working on adding a few behaviors and fixing some glitchs. If any of them could help people, i might start a branch.

New feature :

• minLenght = 0 working (done)
• Open suggestions with button click (to simulate a ) (done) Add a behavior to indicate that no match is found when scope.matches.length == 0 (done) Add option for nullable / not nullable (to simulate null option in ) (in progress)

Fix done :

• Typeahead highlight filter : Fix regex when matchItem is a Html template (it was highlighting the html tag) (done)

[cindoum]

To open it on focus, with the fixed described in my previous post, it should not be harder than adding a directive on the input (like typeahead-open-on-focus) and in the link function bind on element focus and then set modelCtrl.$setViewValue(''); (need require: NgModel).

This directive is describe somewhere else in an issue. (not tested)

[sanfords]

When investigating typeaheads a few months ago I realized that everybody has a different opinion what a typeahead should be. :-)

So here's what I personally need from a typeahead:

1. Show choices on keyboard-down-arrow. (great work!)
2. Associate an id with each item, and bind the id.
3. Allow creation of new items if they don't exist.
4. A button to show the choices.
5. For the popup to go away when the user tabs/shift-tabs/clicks away.
6. To make sure the CSS hooks are there so the choices list doesn't fall off the bottom of the window. Some of my typeaheads have hundreds of choices.

I believe 1, 3, 4 are in your list.

[cindoum]

Typeahead seam to go in a way : advanced input, for me it is more an advanced select...

Most of what your asking is already possbile.

1. need a fix, but easily fixable.
2. this is done with your 'options' kind of -> item.Id as item.Name for item in items
3. This is more or less what editable is doing, but return a string instead of an object ...
4. This is a bit harder, need to play with dissmissClickHandler and events... I have a few more tweaks to have it stable, but then i can send you my code if you want.
5. Tab, enter, esc already close the popup, you can easily add more. Add keyCode to HOT_KEYS line 4 (not tested). Input blur also close the suggestions popup.
6. Not sure to understand... But if you have hundreds of suggestions, why dont you use a filter limitTo:x ? I think this is a strange behavior to show hundreds of suggestions in one block...

The 3 is not a behavior i will be working on as it seem ok to me. If editable = false, it return the match or null, that is what i expect and if editable = true, it return the match object or the string typed in the input if cannot fit it to matches.

[sanfords]

This is great news. There are so many typeheads out there I just wanted to enumerate what I'd like. I think they've all blended together in my mind.

#6 is actually important. Users with large screens can easily see > 30 items in the dropdown. And they'll often want to scroll through the choices before typing. It's especially important combined with #1 and empty input, I think.