{"action":"closed","issue":{"url":"https://api.github.com/repos/CreativeIT/getmdl-select/issues/78","repository_url":"https://api.github.com/repos/CreativeIT/getmdl-select","labels_url":"https://api.github.com/repos/CreativeIT/getmdl-select/issues/78/labels{/name}","comments_url":"https://api.github.com/repos/CreativeIT/getmdl-select/issues/78/comments","events_url":"https://api.github.com/repos/CreativeIT/getmdl-select/issues/78/events","html_url":"https://github.com/CreativeIT/getmdl-select/issues/78","id":317110334,"node_id":"MDU6SXNzdWUzMTcxMTAzMzQ=","number":78,"title":"Scroll not working for IE 11 and Edge - Workaround","user":{"login":"drstrangelovesg","id":38684576,"node_id":"MDQ6VXNlcjM4Njg0NTc2","avatar_url":"https://avatars3.githubusercontent.com/u/38684576?v=4","gravatar_id":"","url":"https://api.github.com/users/drstrangelovesg","html_url":"https://github.com/drstrangelovesg","followers_url":"https://api.github.com/users/drstrangelovesg/followers","following_url":"https://api.github.com/users/drstrangelovesg/following{/other_user}","gists_url":"https://api.github.com/users/drstrangelovesg/gists{/gist_id}","starred_url":"https://api.github.com/users/drstrangelovesg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/drstrangelovesg/subscriptions","organizations_url":"https://api.github.com/users/drstrangelovesg/orgs","repos_url":"https://api.github.com/users/drstrangelovesg/repos","events_url":"https://api.github.com/users/drstrangelovesg/events{/privacy}","received_events_url":"https://api.github.com/users/drstrangelovesg/received_events","type":"User","site_admin":false},"labels":[{"id":292342742,"node_id":"MDU6TGFiZWwyOTIzNDI3NDI=","url":"https://api.github.com/repos/CreativeIT/getmdl-select/labels/duplicate","name":"duplicate","color":"cccccc","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-04-24T07:54:57Z","updated_at":"2018-06-01T15:56:16Z","closed_at":"2018-06-01T15:56:16Z","author_association":"NONE","body":"Hi Guys,\r\n\r\nHaving this issue where adding getmdl-select__fix-height work well for Firefox, Chrome and Safari but not IE 11 and Edge. You simply can't scroll in IE 11 and Edge. I don't know if I did something wrong but trying the actual source file gives the same results.\r\n\r\nSo decided to not use the getmdl-select__fix-height but instead create my own \r\n```\r\n.getmdl-fixheight {\r\n    height: auto;\r\n    max-height: 300px;\r\n    overflow-y: auto;\r\n```\r\nI than add them after the UL \r\n\r\n```\r\n<ul for=\"display\" class=\"mdl-menu mdl-menu--bottom-left mdl-js-menu\">\r\n<div class=\"getmdl-fixheight\">\r\nall the li here\r\n</div>\r\n</ul>\r\n```\r\n\r\nAlso the default js file don't seem to work with IE and Edge too and someone posted a solutions. This is how the JS will look like with the solutions. [https://github.com/CreativeIT/getmdl-select/issues/74](url)\r\n\r\n```\r\n{\r\n    'use strict';\r\n    (function () {\r\n        function whenLoaded() {\r\n            // source: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach\r\n            if (window.NodeList && !NodeList.prototype.forEach) {\r\n                NodeList.prototype.forEach = function (callback, thisArg) {\r\n                    thisArg = thisArg || window;\r\n                    for (var i = 0; i < this.length; i++) {\r\n                        callback.call(thisArg, this[i], i, this);\r\n                    }\r\n                };\r\n            }\r\n            getmdlSelect.init('.getmdl-select');\r\n        };\r\n        window.addEventListener ? window.addEventListener(\"load\", whenLoaded, false) : window.attachEvent && window.attachEvent(\"onload\", whenLoaded);\r\n    }());\r\n    var getmdlSelect = {\r\n        _addEventListeners: function (dropdown) {\r\n            var input = dropdown.querySelector('input');\r\n            var hiddenInput = dropdown.querySelector('input[type=\"hidden\"]');\r\n            var list = dropdown.querySelectorAll('li');\r\n            var menu = dropdown.querySelector('.mdl-js-menu');\r\n            var arrow = dropdown.querySelector('.mdl-icon-toggle__label');\r\n            var label = '';\r\n            var previousValue = '';\r\n            var previousDataVal = '';\r\n            var opened = false;\r\n            var setSelectedItem = function (li) {\r\n                var value = li.textContent.trim();\r\n                input.value = value;\r\n                list.forEach(function (li) {\r\n                    li.classList.remove('selected');\r\n                });\r\n                li.classList.add('selected');\r\n                dropdown.MaterialTextfield.change(value); // handles css class changes\r\n                setTimeout(function () {\r\n                    dropdown.MaterialTextfield.updateClasses_(); //update css class\r\n                }, 250);\r\n                // update input with the \"id\" value\r\n                hiddenInput.value = li.dataset.val || '';\r\n                previousValue = input.value;\r\n                previousDataVal = hiddenInput.value;\r\n                if (\"createEvent\" in document) {\r\n                    var evt = document.createEvent(\"HTMLEvents\");\r\n                    evt.initEvent(\"change\", false, true);\r\n                    menu['MaterialMenu'].hide();\r\n                    input.dispatchEvent(evt);\r\n                }\r\n                else {\r\n                    input.fireEvent(\"onchange\");\r\n                }\r\n            }\r\n            var hideAllMenus = function () {\r\n                opened = false;\r\n                input.value = previousValue;\r\n                hiddenInput.value = previousDataVal;\r\n                if (!dropdown.querySelector('.mdl-menu__container').classList.contains('is-visible')) {\r\n                    dropdown.classList.remove('is-focused');\r\n                }\r\n                var menus = document.querySelectorAll('.getmdl-select .mdl-js-menu');\r\n                [].forEach.call(menus, function (menu) {\r\n                    menu['MaterialMenu'].hide();\r\n                });\r\n                //                var event = new Event('closeSelect');\r\n                var event;\r\n                try {\r\n                    event = new Event('closeSelect');\r\n                }\r\n                catch (err) {}\r\n                if (event == undefined) {\r\n                    event = window.CustomEvent('closeSelect');\r\n                }\r\n                menu.dispatchEvent(event);\r\n            };\r\n            document.body.addEventListener('click', hideAllMenus, false);\r\n            //hide previous select after press TAB\r\n            dropdown.onkeydown = function (event) {\r\n                if (event.keyCode == 9) {\r\n                    input.value = previousValue;\r\n                    hiddenInput.value = previousDataVal;\r\n                    menu['MaterialMenu'].hide();\r\n                    dropdown.classList.remove('is-focused');\r\n                }\r\n            };\r\n            //show select if it have focus\r\n            input.onfocus = function (e) {\r\n                menu['MaterialMenu'].show();\r\n                menu.focus();\r\n                opened = true;\r\n            };\r\n            input.onblur = function (e) {\r\n                e.stopPropagation();\r\n            };\r\n            //hide all old opened selects and opening just clicked select\r\n            input.onclick = function (e) {\r\n                e.stopPropagation();\r\n                if (!menu.classList.contains('is-visible')) {\r\n                    menu['MaterialMenu'].show();\r\n                    hideAllMenus();\r\n                    dropdown.classList.add('is-focused');\r\n                    opened = true;\r\n                }\r\n                else {\r\n                    menu['MaterialMenu'].hide();\r\n                    opened = false;\r\n                }\r\n            };\r\n            input.onkeydown = function (event) {\r\n                if (event.keyCode == 27) {\r\n                    input.value = previousValue;\r\n                    hiddenInput.value = previousDataVal;\r\n                    menu['MaterialMenu'].hide();\r\n                    dropdown.MaterialTextfield.onBlur_();\r\n                    if (label !== '') {\r\n                        dropdown.querySelector('.mdl-textfield__label').textContent = label;\r\n                        label = '';\r\n                    }\r\n                }\r\n            };\r\n            menu.addEventListener('closeSelect', function (e) {\r\n                input.value = previousValue;\r\n                hiddenInput.value = previousDataVal;\r\n                dropdown.classList.remove('is-focused');\r\n                if (label !== '') {\r\n                    dropdown.querySelector('.mdl-textfield__label').textContent = label;\r\n                    label = '';\r\n                }\r\n            });\r\n            //set previous value and data-val if ESC was pressed\r\n            menu.onkeydown = function (event) {\r\n                if (event.keyCode == 27) {\r\n                    input.value = previousValue;\r\n                    hiddenInput.value = previousDataVal;\r\n                    dropdown.classList.remove('is-focused');\r\n                    if (label !== '') {\r\n                        dropdown.querySelector('.mdl-textfield__label').textContent = label;\r\n                        label = '';\r\n                    }\r\n                }\r\n            };\r\n            if (arrow) {\r\n                arrow.onclick = function (e) {\r\n                    e.stopPropagation();\r\n                    if (opened) {\r\n                        menu['MaterialMenu'].hide();\r\n                        opened = false;\r\n                        dropdown.classList.remove('is-focused');\r\n                        dropdown.MaterialTextfield.onBlur_();\r\n                        input.value = previousValue;\r\n                        hiddenInput.value = previousDataVal;\r\n                    }\r\n                    else {\r\n                        hideAllMenus();\r\n                        dropdown.MaterialTextfield.onFocus_();\r\n                        input.focus();\r\n                        menu['MaterialMenu'].show();\r\n                        opened = true;\r\n                    }\r\n                };\r\n            }\r\n            [].forEach.call(list, function (li) {\r\n                li.onfocus = function () {\r\n                    dropdown.classList.add('is-focused');\r\n                    var value = li.textContent.trim();\r\n                    input.value = value;\r\n                    if (!dropdown.classList.contains('mdl-textfield--floating-label') && label == '') {\r\n                        label = dropdown.querySelector('.mdl-textfield__label').textContent.trim();\r\n                        dropdown.querySelector('.mdl-textfield__label').textContent = '';\r\n                    }\r\n                };\r\n                li.onclick = function () {\r\n                    setSelectedItem(li);\r\n                };\r\n                if (li.dataset.selected) {\r\n                    setSelectedItem(li);\r\n                }\r\n            });\r\n        }\r\n        , init: function (selector) {\r\n            var dropdowns = document.querySelectorAll(selector);\r\n            [].forEach.call(dropdowns, function (dropdown) {\r\n                getmdlSelect._addEventListeners(dropdown);\r\n                componentHandler.upgradeElement(dropdown);\r\n                componentHandler.upgradeElement(dropdown.querySelector('ul'));\r\n            });\r\n        }\r\n    };\r\n}\r\n// For IE Compatibility\r\n// source: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent\r\nfunction CustomEvent(event, params) {\r\n    params = params || {\r\n        bubbles: false\r\n        , cancelable: false\r\n        , detail: undefined\r\n    };\r\n    var evt = document.createEvent('CustomEvent');\r\n    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);\r\n    return evt;\r\n}\r\n\r\n```"}}
{"actor":{"display_login":"alexbananabob"}}