Issue with arrow up and down keys

[gaurav-rathod]

Hi, Thank you for this package.

While using this, I assigned height to dropdown using following css code. .ng2-auto-complete ul { height: 100px; overflow-y: auto; }

Everything works perfectly except using arrow up and down key. When you try to move down in the list with arrow down key, it will select the next element but instead of scrolling it will get hidden. Can it be fixed ?

I have made some changes to your plunker to demonstrate it. URL: http://plnkr.co/edit/yK4DJDG4FK4nlCcBlWbq?p=preview select the first dropdown to see the issue.

and here is the expected behavior of dropdown. URL: http://jsfiddle.net/kMzR9/3/

Thanks.

[allenhwkim]

@gaurav-rathod thanks for the detailed reporting of the issue. Fixed height of dropdown has never been in the design. However, I will think about scrolling automatically unless it's a big change

[allenhwkim]

It turns out that it's not just possible with scrollIntoView. We need to adjust container scrollY based on the condition of selected and hidden element. e.g.

• if the selected element is hidden on the top, scroll to show it.
• if the selected element is hidden on the bottom, scroll to show it.

It's not that simple change, but it's possible. any volunteer?

[crh225]

@allenhwkim did you make a plunkr of why scrollIntoView didnt work? Im just curious

[smitthakkar96]

Can I work on this?

[allenhwkim]

@smitthakkar96 plz go for it.

[cen1]

Using

.ngui-auto-complete ul {
    height: 100px;
    overflow-y: auto;
}

in my project and arrow keys seem to work fine.

[ArnaudPel]

@cen1 I'm not sure where you use this css, but when trying to push it down from the parent component, I've had to pierce through as well (since I'm using the default view encapsulation):

::ng-deep .ngui-auto-complete ul {
    height: 100px;
    overflow-y: auto;
}

To anyone interested in that solution: please note that piercing is not a long-term solution. But I guess it can come in handy until this change is merged.

[pittyacg]

Hello. I also have a problem with this scrolling. I added max-height and overflow-y on the ul, and it works fine when using the wheel to scroll. But if I click on the scroll bar, the dropdown hides. Any ideas? I mean, some people said the arrows work for them, but isn't there any good solution I could try?

[Sumant-Singh]

Hello, I have the same issue with ngui-autocomplete. I have added the Overflow-y on the ul it works fine with wheel to scroll but when I click on scrollbar in ngui-autocomplete it hides.Is there any solution for this. I try this in Internet Explorer.