Enabled typeahead popup scroll

[dgermek]

Enabled scrolling on key up/down event on typeahead (custom) popup template.
This is particularly useful if using custom template with fixed or max height. For popup exceeding results, scrolling with moose and keys can be used.
This is not my code (I did not write it) but I found it online (someone put it on plunker).
But it works and I think it would be of great use!

[wesleycho]

This is watching shouldFocus, but there is no shouldFocus attribute in the template - is this a mistake?

[dgermek]

yes! Sorry,my mistake...I mixed up the directive names. Now it's the way it should be

[wesleycho]

Is there any particular reason one cannot use a custom template and plug in your custom directive into that new template?

[dgermek]

I am not sure if that would help. In order to enable scrolling, the directive must be applied to the list element which is generated by the typeahead popup template. I will check it though.

[dgermek]

Yes it can be done with custom popup template, but it's still a bug in typeahead.

Here is a plunker with the current version of typeahead (with the bug):
http://plnkr.co/edit/clN9hThYZ7BHfkuwyGq1
Type in only the letter 'A' and try to scroll with up/down key. You will see that the selected item will not be visible.

Here is a plunker with this pull request where the scroll will work (the selected item will be visible).
Please try typing again the letter 'A' and scrolling down with keys:
http://plnkr.co/edit/VFx3OfMuP6WfRnMg7agz

[RobJacobs]

A simpler approach that would not require a new directive or adding a watch to each element in the dropdown would be to scroll the active item into view in the typeahead keydown handler here by adding the following code:

popUpEl.children()[scope.activeIdx].scrollIntoView(false);

A plunk to demonstrate.

[dgermek]

oh. great! Thanks, will apply it as a change :) That's definitely a much easier solution.

[KennedyIhe]

I updated to the latest version and this issue is still not fixed

[wesleycho]

The fix is in master, not in 0.14.3 currently.

[KennedyIhe]

okay thanks, will look it up.

[Duskfall]

Downloaded and built the master repo and while the issue is fixed with keyboard-nav there is another bug left.

Scenario.

1. Have multiple suggestions available.
2. Suggestions must be the same, at least in the first letters which are typed. The rest characters are irrelevant
3. Define height with overflow scroll that is smaller than the total suggestions.
4. Scroll down to a suggestion and mouse over it or do the same with the keyboard
5. Type the letter sequence which exists in every/almost every suggestion in the list.

Typeahead should focus the first suggestion and scroll to that suggestion but it doesn't.
Demo:
http://codepen.io/Duskfall/pen/adowpL

For the demo to reproduce:
Type "t"
Scroll down
Type "e"
You can see the problem