Dragging scrollbar (a result of content overflow) in Internet explorer results in blur event, thus hiding the list of values

[branislav-kurajda]

Have a fixed height list of values, as achieved by the following css

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

Current behavior

When interacting with the scrollbar introduced by this css in Internet Explorer a blur event is fired, which results in the hiding of the list. Dragging a scrollbar in other browsers (Firefox, chrome) does not fire a blur event and thus these browsers are not affected.

Expected/desired behavior

List of values stays open during interaction with the scrollbar.

Other information

This issue with Internet explorer is discussed here: http://stackoverflow.com/questions/2023779/clicking-on-a-divs-scroll-bar-fires-the-blur-event-in-ie

One can distinguish this particular blur event by the fact that it is not accompanied by a click event (as discussed in the link above). A workaround is thus possible, which only handles blur event after a click event was recieved.

[pravinrahurkar-tudip]

Hi, I am using ng2-auto-complete module for that facing same issue on IE browser. The merged solution is not working for me.

Any help for this is appreciated.

[branislav-kurajda]

Hello!

sorry I am no longer part of a project which needed the fix so am unable to simulate it again. The fix worked for me though ...

Best, bk.

On Fri, Oct 27, 2017 at 4:54 PM, pravinrahurkar-tudip < [email protected]> wrote:

Hi, I am using ng2-suto-complete module for that facing same issue on IE browser. The merged solution is not working for me.

Any help for this is appreciated.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ng2-ui/auto-complete/issues/187#issuecomment-339994802, or mute the thread https://github.com/notifications/unsubscribe-auth/AZUR32ZY4g4Rgg1GE_lYWwFjRdbTvfrqks5swe6rgaJpZM4NB0oc .

[pravinrahurkar-tudip]

Hi, I am using ng2-auto-complete module for that facing same issue on IE browser. The merged solution is not working for me. Any help for this is appreciated.

Any update here...

[sooraj-zixent]

This solution works for me, May not be much efficient but working perfectly for me.

Add this condition to prevent this.hideAutoCompleteDropdown() function in auto-complete.directive.js

this.hideAutoCompleteDropdown = function (event) {
            // Work around for closing of dropdown while scrolling
            if ($(".ngui-auto-complete:hover").length !== 0 && $(".ngui-auto-complete ul:hover").length === 0) {
                return;
            }
...
...

And max-height : 200px; is given to component instead of ul

.ngui-auto-complete{ max-height: 200px; overflow-y: auto; }

[CaffGeek]

I'm having this issue in Chrome.

[danail-vasilev]

Hi Guys. We are having this issue in Chrome as well ! Could you please assist for a workaround and / or fix ? Regards,

[PrasanthJayaraman]

I'm facing same issue in Chrome as well.. This happens only in the modal popup not in normal UI.. Check the attached stackblitz. Reproduced here: https://stackblitz.com/edit/ngx-bootstrap-datepicker-locale-bug

[Liad-n]

is there any workaround for that? i'm using version 0.12.0