Drop Down Scrollbars do not Work in IE

[scirelli]

When trying to scroll through a list in IE Edge (11), you can't do it, the drop down just closes. http://plnkr.co/edit/1pvaCDBDEJSwUlFeaieS?p=preview

In the above plunker, uncheck the disabled box, click on the selectbox, try to use the mouse to scroll through the items in the list.

[indrimuska]

Thank you @scirelli for reporting this. Unfortunately I can't verify the issue at the moment, since I don't have any PC with IE Edge installed. Do you see the problem even in the demo page?

[scirelli]

I had to install a VM to test it myself. I'll take a look when I get on the laptop I installed the VM on.

You can Google for MS window IE11 Virtual machine. You'll get the Windows dev sit with vms you can download. https://dev.windows.com/en-us/microsoft-edge/tools/vms/linux/

[indrimuska]

Oh good, thank you for the tip! I will try it soon ;)

[scirelli]

Just tried the demo page. Same issue. Scroll bars don't work. I guess the scroll bar is outside the drop down area? Clicking outside hides the drop down.

[scirelli]

I wrote a quick hack to try and get this to work in IE. It's not pretty, and I'm sure it's not efficient but maybe you can improve on it.

Here's the merge on my fork.

Not sure why the indentations are messed up. I use spaces....

I don't want to pull request to your repo because I had forked yours, but for some reason your's was different from the bower version I got? So instead of trying to figure out where the bower one came from I just copied it's source over.

Anyway, at the very least it should give you some ideas on how to fix this in IE :)

[indrimuska]

Yes, of course! Thank you for posting this, it would be very helpful. I'm going to install a vm with W10 and IE Edge, so that I can take a look and then I'll come back to you. :)

[indrimuska]

Here I am again. I've just installed Windows 10 Pro, but I am unable to reproduce the issue with Microsoft Edge, not even with IE 11. Maybe it may depends on the installed version of these browsers. Here it is my situation.

Microsoft Edge
Internet Explorer 11

[scirelli]

I'm running the Windows 7 vm. You clicked and dragged on the scroll bar and it worked? Can you send me the plunker link?

[indrimuska]

Last tests have been made with Windows 10 on the demo page and everything looks fine. I've just installed a Windows 7 vm but, as for Windows 10, the scrollbar works very well. Here it is the version of my IE.

[scirelli]

Idk, I still can't get it to work on the Win7 VM. Slightly different version

[tkahn]

I can verify that this is a bug on Windows 7 IE11. We are two independent testers that have seen the same issue and the problem is that the blur event tied to the input is triggered when the user interacts with the scrollbar.

[actias]

Hi! I love your project. It's literally exactly what I've been looking for in my app for some time. I did some digging and it looks like the problem is with IE/Edge. Whenever you click on a scrollbar, it will remove focus from the input.

I modified the section of code that controls this to fix this issue with IE/Edge without affecting other browsers.

Here's the fix for anyone that's interested.

// DOM event listeners

scope.preventClose = false; /// This is a variable that tracks where or not to prevent the window from closing.

input = angular.element(element[0].querySelector('.selector-input input'))
    .on('focus', function () {

        if(scope.preventClose) {
            scope.preventClose = false;
            return;
        }

        $timeout(function () {
            scope.$apply(scope.open);
        });
    })
    .on('blur', function () {

        if(scope.preventClose) {
            input.focus();
            return;
        }

        scope.$apply(scope.close);
    })
    .on('keydown', function (e) {
        scope.$apply(function () {
            scope.keydown(e);
        });
    })
    .on('input', function () {
        scope.setInputWidth();
    });
dropdown
    .on('mousedown', function (e) {
        scope.preventClose = true; /// Mousedown on the dropdown will prevent this.
        e.preventDefault();
    });
angular.element($window)
    .on('resize', function () {
        scope.dropdownPosition();
    });

[jeeyyy]

This is fixed in a high performance variant/fork of the same component: https://github.com/jkodu/angular-selector-on-steroids

Refer enhanced example page - https://jkodu.github.io/angular-selector-on-steroids/ (allow unsafe scripts).