IE11.0.47 scrollbar closes dropdown

[worthy7]

Fairly annoying issue that just started from this release of IE.

Dogfalo/materialize#901
selectize/selectize.js#1004
mgcrea/angular-strap#1202

The e.target is always == to the Input element which caused it (as expected)
The activeElement is always == the body of the doc when clicking the scrollbar.

Running low on ideas of how to fix this....

[worthy7]

My first horrible solution, but it works:

    _.mixin(Typeahead.prototype, {
        _hacks: function hacks() {
            var $input, $menu, IsMouseInMenu;
            $input = this.input.$input || $("<div>");
            $menu = this.menu.$node || $("<div>");
            $input.on("blur.tt", function ($e) {
                if (_.isMsie() && (IsMouseInMenu)) {
                    $e.preventDefault();
                    $e.stopImmediatePropagation();
                    _.defer(function () {
                        $input.focus();
                    });
                }
            });
            $menu.on("mousedown.tt", function ($e) {
                $e.preventDefault();
            });
            $menu.mouseenter(function () {
                clearTimeout($(this).data('timeoutId'));
                console.log("mounsein")
                IsMouseInMenu = true;
            }).mouseleave(function () {
                var someElement = $(this),
                    timeoutId = setTimeout(function () {
                        IsMouseInMenu = false;
                        console.log("mounseout")
                    }, 50);
                //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
                someElement.data('timeoutId', timeoutId);
            });
        },

[mike-bresnahan]

I have not looked at the details of your issue, but we started having a similar issue with our custom dropdown component in IE 11.0.47. In our case, the root cause was that when the option was clicked on, focus was given to the body element instead of the option element (a div) and this caused the options to close without selecting a new option. I fixed the issue by adding tabindex="-1" to the option element. This allowed focus to go to the option element as expected.

[worthy7]

Thanks @mike-bresnahan , that will probably help a few others. I did not encounter this issue actually, it only affected the scrollbar.

[mike-bresnahan]

It appears that there was a semi-documented change to the focus behavior in IE 11.0.47. What's odd is that the document says, "Addressed issue that prevents an element from receiving focus in Internet Explorer", however the behavior I observe is that an element does NOT receive focus as expected.

https://support.microsoft.com/en-us/help/4041681/windows-7-update-kb4041681

This security update includes improvements and fixes that were a part of update KB4038803 (released September 19, 2017) and resolves the following issues:
Addressed issue with docking and undocking Internet Explorer windows.
Addressed issue with form submissions in Internet Explorer.
Addressed issue with URL encoding in Internet Explorer.
Addressed issue that prevents an element from receiving focus in Internet Explorer.
Addressed issue with the rendering of a graphics element in Internet Explorer.
Addressed issue where USBHUB.SYS randomly causes memory corruption that results in random system crashes that are extremely difficult to diagnose.
Security updates to Microsoft Windows Search Component, Windows kernel-mode drivers, Microsoft Graphics Component, Internet Explorer, Windows kernel, Windows Wireless Networking, Microsoft JET Database Engine, and the Windows SMB Server.

[worthy7]

Yep, I saw this too, either way they just broke things due to lack of proper testing.

[worthy7]

@mike-bresnahan I tried looking at your solution again, as mine causes some choppy loading of the boxes, but I couldn't actually see any <option> element in the code. It seems everything is a <div role="option">

[worthy7]

Ah found it, the solution was to put tabindex="-1" on the role="listbox" element

[zappzerapp]

@worthy7 Could you give an example using the official scrollable-dropdown-menu

Because there is no:

role="listbox"

[worthy7]

Sorry, for some reason I have a different kind of dropdown, I think I may have customized it. Anyway, I think it is most likely the <div class="tt-menu" element. I don't have much time to look at it right now.