From 537ec77a0d9be4cd31d0fbac087d5f527e26a675 Mon Sep 17 00:00:00 2001
From: pgarrison <philipmg@cs.washington.edu>
Date: Thu, 17 Sep 2020 15:46:15 -0700
Subject: [PATCH] 10 Close other multiselects on open

We now use the `:focus-within` selector to handle opening & closing the
dropdowns.
* `:focus-within` is supported by all major browsers as of January 2020
* The global `hideMultiselects` function has been removed since we
aren't using it. This is a breaking change, but it was never publicly
documented and I don't see much use case for it anymore. In case someone
was using `hideMultiselects`, they can now use
`document.activeElement.blur()` instead.
---
 multiselect.min.js          | 45 +------------------------------------
 scripts/multiselect.core.js | 39 +++-----------------------------
 scripts/multiselect.js      | 17 --------------
 styles/multiselect.css      | 14 +++++++++++-
 4 files changed, 17 insertions(+), 98 deletions(-)

diff --git a/multiselect.min.js b/multiselect.min.js
index a3940a4..c5cbaf2 100644
--- a/multiselect.min.js
+++ b/multiselect.min.js
@@ -1,44 +1 @@
-if(!m_helper)
-{var m_helper={removeNode:function(id){var el=document.getElementById(id);if(el){el.parentNode.removeChild(el)}},insertAfter:function(item,target){var parent=target.parentNode;if(target.nextElementSibling){parent.insertBefore(item,target.nextElementSibling)}else{parent.appendChild(item)}},hide:function(element){element.style.display='none'},hideAll:function(array){for(var i=0;i<array.length;i++){this.hide(array[i])}},show:function(element){element.style.display='block'},showAll:function(array){for(var i=0;i<array.length;i++){this.show(array[i])}},parent:function(element,id){var parent=element.parentElement;while(parent&&parent.tagName!='BODY'){if(parent.id==id){return parent}
-parent=parent.parentElement}
-return null},create:function(data){var result=document.createElement(data.tag);if(data.id){result.id=data.id}
-if(data.class){result.className=data.class}
-if(data.attributes){for(var prop in data.attributes){result.setAttribute(prop,data.attributes[prop])}}
-if(data.data){for(var prop in data.data){result.dataset[prop]=data.data[prop]}}
-return result},div:function(data){if(!data){data=new Object()}
-data.tag='div';return this.create(data)},label:function(data){if(!data){data=new Object()}
-data.tag='label';return this.create(data)},textField:function(data){if(!data){data=new Object()}
-data.tag='input';if(!data.attributes)
-data.attributes=new Object();data.attributes.type='text';return this.create(data)},checkbox:function(data){if(!data){data=new Object()}
-data.tag='input';if(!data.attributes)
-data.attributes=new Object();data.attributes.type='checkbox';return this.create(data)},each:function(array,handler){for(var i=0;i<array.length;i++){handler(array[i])}},setActive:function(element){element.classList.add('active')},setUnactive:function(element){element.classList.remove('active')},select:function(element){element.selected=!0;element.setAttribute('selected','selected')},deselect:function(element){element.selected=!1;element.removeAttribute('selected')},check:function(element){element.checked=!0},uncheck:function(element){element.checked=!1},click:function(element){if(element.fireEvent){el.fireEvent('onclick')}else{var evObj=document.createEvent('Events');evObj.initEvent('click',!0,!1);element.dispatchEvent(evObj)}},setDisabled:function(element,value){element.disabled=value},}}
-function Multiselect(item,opts){if((typeof($)!='undefined'&&!$(item).is('select'))||(typeof($)=='undefined'&&item.tagName!='SELECT')){throw "Multiselect: passed object must be a select"}
-if((typeof($)!='undefined'&&!$(item).attr('multiple'))||(typeof($)=='undefined'&&!item.hasAttribute('multiple'))){throw "Multiselect: passed object should contain 'multiple' attribute"}
-this._item=item;this._createUI();this._appendEvents();this._initSelectedFields();this._initIsEnabled()}
-Multiselect.prototype={_createUI:function(){m_helper.removeNode(this._getIdentifier());var wrapper=this._createWrapper();m_helper.insertAfter(wrapper,this._item);wrapper.appendChild(this._createInputField());wrapper.appendChild(this._createItemList());m_helper.hide(this._item)},_createWrapper:function(){var result=document.createElement('div');result.className='multiselect-wrapper';result.id=this._getIdentifier();return result},_createInputField:function(){var input=m_helper.textField({id:this._getInputFieldIdentifier(),class:'multiselect-input',attributes:{autocomplete:'off'}}),label=m_helper.label({id:this._getInputBadgeIdentifier(),class:'multiselect-count',attributes:{for:this._getInputFieldIdentifier()}}),dropDownArrow=m_helper.label({class:'multiselect-dropdown-arrow',attributes:{for:this._getInputFieldIdentifier()}}),result=m_helper.div({class:'multiselect-input-div'});label.style.visibility='hidden';label.innerHTML=0;result.appendChild(input);result.appendChild(label);result.appendChild(dropDownArrow);return result},_createItemList:function(){var list=m_helper.create({tag:'ul'});var self=this;m_helper.each(this._getItems(this._item),function(e){var insertItem=self._createItem('li',e.id,e.text,e.selected);list.appendChild(insertItem);var checkBox=insertItem.querySelector('input[type=checkbox]');e.multiselectElement=checkBox;checkBox.dataset.multiselectElement=JSON.stringify(e)});var selectAll=this._createItem('span',-1,'Select all');var result=m_helper.div({id:this._getItemListIdentifier(),class:'multiselect-list'});result.appendChild(selectAll);result.appendChild(m_helper.create({tag:'hr'}));result.appendChild(list);return result},_createItem:function(wrapper,value,text,selected){var checkBox=m_helper.checkbox({class:'multiselect-checkbox',data:{val:value}}),textBox=m_helper.create({tag:'span',class:'multiselect-text'}),result=m_helper.create({tag:wrapper}),label=m_helper.label();textBox.className='multiselect-text';textBox.innerHTML=text;label.appendChild(checkBox);label.appendChild(textBox);result.appendChild(label);return result},_initSelectedFields:function(){var itemResult=this._getItems().filter(function(obj){return obj.selected});if(itemResult.length!=0){var self=this;m_helper.each(itemResult,function(e){self.select(e.id)})}
-this._hideList(this)},_initIsEnabled:function(){this.setIsEnabled(!this._item.disabled)},destroy(){m_helper.removeNode(this._getIdentifier());m_helper.show(this._item);var index=window.multiselects._items.indexOf(this._item);if(index>-1){window.multiselects._items.splice(index,1);window.multiselects.splice(index,1)}},select:function(val){this._toggle(val,!0)},deselect:function(val){this._toggle(val,!1)},setIsEnabled(isEnabled){if(this._isEnabled===isEnabled)return;var wrapperItem=document.getElementById(this._getIdentifier());if(isEnabled){wrapperItem.classList.remove('disabled')}else{wrapperItem.classList.add('disabled')}
-m_helper.setDisabled(this._item,!isEnabled);m_helper.setDisabled(document.getElementById(this._getInputFieldIdentifier()),!isEnabled);this._isEnabled=isEnabled},_toggle:function(val,setCheck){var self=this;if(val){m_helper.each(document.getElementById(this._getIdentifier()).querySelectorAll('.multiselect-checkbox'),function(e){if(e.dataset.val==val){if(setCheck&&!e.checked){m_helper.check(e);self._onCheckBoxChange(e,self)}else if(!setCheck&&e.checked){m_helper.uncheck(e);self._onCheckBoxChange(e,self)}}});self._updateText(self)}},selectAll:function(val){var selectAllChkBox=document.querySelector('#'+this._getIdentifier()+' .multiselect-checkbox');m_helper.check(selectAllChkBox);this._onCheckBoxChange(selectAllChkBox,this);this._updateText(this)},deselectAll:function(){var selectAllChkBox=document.querySelector('#'+this._getIdentifier()+' .multiselect-checkbox');m_helper.uncheck(selectAllChkBox);this._onCheckBoxChange(selectAllChkBox,this);this._updateText(this)},_checkboxClickEvents:{},setCheckBoxClick(id,handler){if(typeof handler==="function"){this._checkboxClickEvents[id]=handler}else{console.error("Checkbox click handler for checkbox value="+id+" is not a function")}
-return this},_appendEvents:function(){var self=this;document.getElementById(self._getInputFieldIdentifier()).addEventListener('focus',function(event){self._showList(self);document.getElementById(self._getInputFieldIdentifier()).value='';m_helper.each(window.multiselects,function(e){if(document.getElementById(e._getItemListIdentifier()).offsetParent&&m_helper.parent(event.target,e._getIdentifier())){e._hideList(self)}})});document.getElementById(self._getInputFieldIdentifier()).addEventListener('click',function(){self._showList(self);document.getElementById(self._getInputFieldIdentifier()).value=''});document.getElementById(self._getIdentifier()).addEventListener('click',function(event){event=event||window.event;var target=event.target||event.srcElement;if(m_helper.parent(target,self._getIdentifier())){event.stopPropagation()}});document.getElementById(self._getItemListIdentifier()).addEventListener('mouseover',function(){self._showList(self)});m_helper.each(document.getElementById(self._getIdentifier()).querySelectorAll('.multiselect-checkbox'),function(e){e.addEventListener('change',function(event){self._onCheckBoxChange(e,self,event)})});var onInput=function(){var text=this.value.toLowerCase();if(!text||text==''){m_helper.show(document.querySelector('#'+self._getItemListIdentifier()+' > span'));m_helper.show(document.querySelector('#'+self._getItemListIdentifier()+' > hr'));m_helper.showAll(document.querySelectorAll('#'+self._getItemListIdentifier()+' li'))}else{m_helper.hide(document.querySelector('#'+self._getItemListIdentifier()+' > span'));m_helper.hide(document.querySelector('#'+self._getItemListIdentifier()+' > hr'));var array=Array.prototype.filter.call(document.querySelectorAll('#'+self._getItemListIdentifier()+' li span'),function(obj){return obj.innerHTML.toLowerCase().indexOf(text)>-1});m_helper.hideAll(document.querySelectorAll('#'+self._getItemListIdentifier()+' li'));m_helper.each(array,function(e){m_helper.show(e.parentElement.parentElement)})}}
-document.getElementById(self._getInputFieldIdentifier()).addEventListener('propertychange',onInput);document.getElementById(self._getInputFieldIdentifier()).addEventListener('input',onInput)},_onCheckBoxChange:function(checkbox,self,event){if(!checkbox.dataset.multiselectElement){var checkedState=self._performSelectAll(checkbox,self);if(typeof self._checkboxClickEvents.checkboxAll==="function"){self._checkboxClickEvents.checkboxAll(checkbox,{checked:checkedState})}}
-else{var checkedState=self._performSelectItem(checkbox,self);if(typeof self._checkboxClickEvents[checkedState.id]==="function"){self._checkboxClickEvents[checkedState.id](checkbox,checkedState)}
-self._updateSelectAll(self)}
-self._forceUpdate()},_performSelectItem:function(checkbox,self){var item=JSON.parse(checkbox.dataset.multiselectElement);if(checkbox.checked){self._itemCounter++;m_helper.select(this._item.options[item.index]);m_helper.setActive(checkbox.parentElement.parentElement);return{id:item.id,checked:!0}}
-self._itemCounter--;m_helper.deselect(this._item.options[item.index]);m_helper.setUnactive(checkbox.parentElement.parentElement);return{id:item.id,checked:!1}},_performSelectAll:function(checkbox,self){var items=self._getItems();if(checkbox.checked){self._itemCounter=items.length;m_helper.each(items,function(e){m_helper.setActive(e.multiselectElement.parentElement.parentElement);m_helper.select(self._item.options[e.index]);m_helper.check(e.multiselectElement)});return!0}
-self._itemCounter=0;m_helper.each(items,function(e){e.multiselectElement.parentElement.parentElement.classList.remove('active');m_helper.deselect(self._item.options[e.index]);m_helper.uncheck(e.multiselectElement)});return!1},_updateSelectAll:function(self){var allChkBox=document.getElementById(self._getItemListIdentifier()).querySelector('input[type=checkbox]');if(self._itemCounter==self._getItems().length){allChkBox.checked=!0}
-else if(allChkBox.checked){allChkBox.checked=!1}},_hideList:function(context,event){m_helper.setUnactive(document.getElementById(context._getItemListIdentifier()));m_helper.show(document.getElementById(context._getItemListIdentifier()).querySelector('span'));m_helper.show(document.getElementById(context._getItemListIdentifier()).querySelector('hr'));m_helper.showAll(document.getElementById(context._getItemListIdentifier()).querySelectorAll('li'));context._updateText(context);if(event)
-event.stopPropagation()},_updateText:function(context){var activeItems=document.getElementById(context._getItemListIdentifier()).querySelectorAll('ul .active');if(activeItems.length>0){var val='';for(var i=0;i<(activeItems.length<5?activeItems.length:5);i++){val+=activeItems[i].innerText+", "}
-val=val.substr(0,val.length-2);if(val.length>20){val=val.substr(0,17)+'...'}}
-if(activeItems.length==document.getElementById(context._getItemListIdentifier()).querySelectorAll('ul li').length){val='All selected'}
-document.getElementById(context._getInputFieldIdentifier()).value=val?val:''},_showList:function(context){m_helper.setActive(document.getElementById(context._getItemListIdentifier()))},_forceUpdate:function(){var badge=document.getElementById(this._getInputBadgeIdentifier());badge.style.visibility='hidden';if(this._itemCounter!=0){badge.innerHTML=this._itemCounter;badge.style.visibility='visible';var ddArrow=badge.nextElementSibling;if(this._itemCounter<10){badge.style.left='-45px';ddArrow.style.marginLeft='-42px'}
-else if(this._itemCounter<100){badge.style.left='-50px';ddArrow.style.marginLeft='-47px'}
-else if(this._itemCounter<1000){badge.style.left='-55px';ddArrow.style.marginLeft='-52px'}
-else if(this._itemCounter<10000){badge.style.left='-60px';ddArrow.style.marginLeft='-57px'}}},_items:undefined,_itemCounter:0,_isEnabled:!0,_getItems:function(){if(this._items==undefined){var result=[];var opts=this._item.options;for(var i=0;i<opts.length;i++){var insertItem={id:opts[i].value,index:i,text:opts[i].innerHTML,selected:!!opts[i].selected,selectElement:opts[i]};result.push(insertItem)}
-this._items=result}
-return this._items},_getItemUniqueIdentifier:function(){var id=this._item.getAttribute('id'),name=this._item.getAttribute('name');if(!(id||name)){throw "Multiselect: object does not contain any identifier (id or name)"}
-return id?id:name},_getIdentifier:function(){return this._getItemUniqueIdentifier()+'_multiSelect'},_getInputFieldIdentifier:function(){return this._getItemUniqueIdentifier()+'_input'},_getItemListIdentifier:function(){return this._getItemUniqueIdentifier()+'_itemList'},_getInputBadgeIdentifier:function(){return this._getItemUniqueIdentifier()+'_inputCount'}}
-window.multiselects=[];if(typeof($)!='undefined'){$.fn.multiselect=function(){var res=[];if(!window.multiselects._items){window.multiselects._items=[]}
-if(this.length!=0){$(this).each(function(i,e){var index=window.multiselects._items.indexOf(e);if(index==-1){var inputItem=new Multiselect(e);window.multiselects.push(inputItem);window.multiselects._items.push(e);res.push(inputItem)}else{res.push(window.multiselects[index])}})}
-return res.length==1?res[0]:$(res)};$(document).click(function(event){hideMultiselects(event)})}else{document.multiselect=function(selector){var res=[];if(!window.multiselects._items){window.multiselects._items=[]}
-m_helper.each(document.querySelectorAll(selector),function(e){var index=window.multiselects._items.indexOf(e);if(index==-1){var inputItem=new Multiselect(e);window.multiselects.push(inputItem);window.multiselects._items.push(e);res.push(inputItem)}else{res.push(window.multiselects[index])}});return res.length==1?res[0]:res}
-window.onclick=function(event){hideMultiselects(event)}}
-function hideMultiselects(event){m_helper.each(window.multiselects,function(e){if(document.getElementById(e._getItemListIdentifier()).offsetParent&&!m_helper.parent(event.target,e._getIdentifier())){e._hideList(e,event)}})}
\ No newline at end of file
+!function(e){var t={};function i(n){if(t[n])return t[n].exports;var l=t[n]={i:n,l:!1,exports:{}};return e[n].call(l.exports,l,l.exports,i),l.l=!0,l.exports}i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)i.d(n,l,function(t){return e[t]}.bind(null,l));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=0)}([function(e,t){if(!i)var i={removeNode:function(e){var t=document.getElementById(e);t&&t.parentNode.removeChild(t)},insertAfter:function(e,t){var i=t.parentNode;t.nextElementSibling?i.insertBefore(e,t.nextElementSibling):i.appendChild(e)},hide:function(e){e.style.display="none"},hideAll:function(e){for(var t=0;t<e.length;t++)this.hide(e[t])},show:function(e){e.style.display="block"},showAll:function(e){for(var t=0;t<e.length;t++)this.show(e[t])},parent:function(e,t){for(var i=e.parentElement;i&&"BODY"!=i.tagName;){if(i.id==t)return i;i=i.parentElement}return null},create:function(e){var t=document.createElement(e.tag);if(e.id&&(t.id=e.id),e.class&&(t.className=e.class),e.attributes)for(var i in e.attributes)t.setAttribute(i,e.attributes[i]);if(e.data)for(var i in e.data)t.dataset[i]=e.data[i];return t},div:function(e){return e||(e=new Object),e.tag="div",this.create(e)},label:function(e){return e||(e=new Object),e.tag="label",this.create(e)},textField:function(e){return e||(e=new Object),e.tag="input",e.attributes||(e.attributes=new Object),e.attributes.type="text",this.create(e)},checkbox:function(e){return e||(e=new Object),e.tag="input",e.attributes||(e.attributes=new Object),e.attributes.type="checkbox",this.create(e)},each:function(e,t){for(var i=0;i<e.length;i++)t(e[i])},setActive:function(e){e.classList.add("active")},setUnactive:function(e){e.classList.remove("active")},select:function(e){e.selected=!0,e.setAttribute("selected","selected")},deselect:function(e){e.selected=!1,e.removeAttribute("selected")},check:function(e){e.checked=!0},uncheck:function(e){e.checked=!1},click:function(e){if(e.fireEvent)el.fireEvent("onclick");else{var t=document.createEvent("Events");t.initEvent("click",!0,!1),e.dispatchEvent(t)}},setDisabled:function(e,t){e.disabled=t}};function n(e,t){if("undefined"!=typeof $&&!$(e).is("select")||"undefined"==typeof $&&"SELECT"!=e.tagName)throw"Multiselect: passed object must be a select";if("undefined"!=typeof $&&!$(e).attr("multiple")||"undefined"==typeof $&&!e.hasAttribute("multiple"))throw"Multiselect: passed object should contain 'multiple' attribute";this._item=e,this._createUI(),this._appendEvents(),this._initSelectedFields(),this._initIsEnabled()}n.prototype={_createUI:function(){i.removeNode(this._getIdentifier());var e=this._createWrapper();i.insertAfter(e,this._item),e.appendChild(this._createInputField()),e.appendChild(this._createItemList()),i.hide(this._item)},_createWrapper:function(){var e=document.createElement("div");return e.className="multiselect-wrapper",e.id=this._getIdentifier(),e},_createInputField:function(){var e=i.textField({id:this._getInputFieldIdentifier(),class:"multiselect-input",attributes:{autocomplete:"off"}}),t=i.label({id:this._getInputBadgeIdentifier(),class:"multiselect-count",attributes:{for:this._getInputFieldIdentifier()}}),n=i.label({class:"multiselect-dropdown-arrow",attributes:{for:this._getInputFieldIdentifier()}}),l=i.div({class:"multiselect-input-div"});return t.style.visibility="hidden",t.innerHTML=0,l.appendChild(e),l.appendChild(t),l.appendChild(n),l},_createItemList:function(){var e=i.create({tag:"ul"}),t=this;i.each(this._getItems(this._item),(function(i){var n=t._createItem("li",i.id,i.text,i.selected);e.appendChild(n);var l=n.querySelector("input[type=checkbox]");i.multiselectElement=l,l.dataset.multiselectElement=JSON.stringify(i)}));var n=this._createItem("span",-1,"Select all"),l=i.div({id:this._getItemListIdentifier(),class:"multiselect-list"});return l.appendChild(n),l.appendChild(i.create({tag:"hr"})),l.appendChild(e),l},_createItem:function(e,t,n,l){var c=i.checkbox({class:"multiselect-checkbox",data:{val:t}}),s=i.create({tag:"span",class:"multiselect-text"}),r=i.create({tag:e}),u=i.label();return s.className="multiselect-text",s.innerHTML=n,u.appendChild(c),u.appendChild(s),u.tabIndex=-1,r.appendChild(u),r},_initSelectedFields:function(){var e=this._getItems().filter((function(e){return e.selected}));if(0!=e.length){var t=this;i.each(e,(function(e){t.select(e.id)}))}},_initIsEnabled:function(){this.setIsEnabled(!this._item.disabled)},destroy(){i.removeNode(this._getIdentifier()),i.show(this._item);var e=window.multiselects._items.indexOf(this._item);e>-1&&(window.multiselects._items.splice(e,1),window.multiselects.splice(e,1))},select:function(e){this._toggle(e,!0)},deselect:function(e){this._toggle(e,!1)},setIsEnabled(e){if(this._isEnabled!==e){var t=document.getElementById(this._getIdentifier());e?t.classList.remove("disabled"):t.classList.add("disabled"),i.setDisabled(this._item,!e),i.setDisabled(document.getElementById(this._getInputFieldIdentifier()),!e),this._isEnabled=e}},_toggle:function(e,t){var n=this;e&&(i.each(document.getElementById(this._getIdentifier()).querySelectorAll(".multiselect-checkbox"),(function(l){l.dataset.val==e&&(t&&!l.checked?(i.check(l),n._onCheckBoxChange(l,n)):!t&&l.checked&&(i.uncheck(l),n._onCheckBoxChange(l,n)))})),n._updateText(n))},selectAll:function(e){var t=document.querySelector("#"+this._getIdentifier()+" .multiselect-checkbox");i.check(t),this._onCheckBoxChange(t,this),this._updateText(this)},deselectAll:function(){var e=document.querySelector("#"+this._getIdentifier()+" .multiselect-checkbox");i.uncheck(e),this._onCheckBoxChange(e,this),this._updateText(this)},_checkboxClickEvents:{},setCheckBoxClick(e,t){return"function"==typeof t?this._checkboxClickEvents[e]=t:console.error("Checkbox click handler for checkbox value="+e+" is not a function"),this},_appendEvents:function(){var e=this;document.getElementById(e._getInputFieldIdentifier()).addEventListener("click",(function(){document.getElementById(e._getInputFieldIdentifier()).value=""})),document.getElementById(e._getIdentifier()).addEventListener("click",(function(t){var n=(t=t||window.event).target||t.srcElement;i.parent(n,e._getIdentifier())&&t.stopPropagation()})),i.each(document.getElementById(e._getIdentifier()).querySelectorAll(".multiselect-checkbox"),(function(t){t.addEventListener("change",(function(i){e._onCheckBoxChange(t,e,i)}))}));var t=function(){var t=this.value.toLowerCase();if(t&&""!=t){i.hide(document.querySelector("#"+e._getItemListIdentifier()+" > span")),i.hide(document.querySelector("#"+e._getItemListIdentifier()+" > hr"));var n=Array.prototype.filter.call(document.querySelectorAll("#"+e._getItemListIdentifier()+" li span"),(function(e){return e.innerHTML.toLowerCase().indexOf(t)>-1}));i.hideAll(document.querySelectorAll("#"+e._getItemListIdentifier()+" li")),i.each(n,(function(e){i.show(e.parentElement.parentElement)}))}else i.show(document.querySelector("#"+e._getItemListIdentifier()+" > span")),i.show(document.querySelector("#"+e._getItemListIdentifier()+" > hr")),i.showAll(document.querySelectorAll("#"+e._getItemListIdentifier()+" li"))};document.getElementById(e._getInputFieldIdentifier()).addEventListener("propertychange",t),document.getElementById(e._getInputFieldIdentifier()).addEventListener("input",t)},_onCheckBoxChange:function(e,t,i){if(e.dataset.multiselectElement){n=t._performSelectItem(e,t);"function"==typeof t._checkboxClickEvents[n.id]&&t._checkboxClickEvents[n.id](e,n),t._updateSelectAll(t)}else{var n=t._performSelectAll(e,t);"function"==typeof t._checkboxClickEvents.checkboxAll&&t._checkboxClickEvents.checkboxAll(e,{checked:n})}t._updateText(t),t._forceUpdate()},_performSelectItem:function(e,t){var n=JSON.parse(e.dataset.multiselectElement);return e.checked?(t._itemCounter++,i.select(this._item.options[n.index]),i.setActive(e.parentElement.parentElement),{id:n.id,checked:!0}):(t._itemCounter--,i.deselect(this._item.options[n.index]),i.setUnactive(e.parentElement.parentElement),{id:n.id,checked:!1})},_performSelectAll:function(e,t){var n=t._getItems();return e.checked?(t._itemCounter=n.length,i.each(n,(function(e){i.setActive(e.multiselectElement.parentElement.parentElement),i.select(t._item.options[e.index]),i.check(e.multiselectElement)})),!0):(t._itemCounter=0,i.each(n,(function(e){e.multiselectElement.parentElement.parentElement.classList.remove("active"),i.deselect(t._item.options[e.index]),i.uncheck(e.multiselectElement)})),!1)},_updateSelectAll:function(e){var t=document.getElementById(e._getItemListIdentifier()).querySelector("input[type=checkbox]");e._itemCounter==e._getItems().length?t.checked=!0:t.checked&&(t.checked=!1)},_updateText:function(e){var t=document.getElementById(e._getItemListIdentifier()).querySelectorAll("ul .active");if(t.length>0){for(var i="",n=0;n<(t.length<5?t.length:5);n++)i+=t[n].innerText+", ";(i=i.substr(0,i.length-2)).length>20&&(i=i.substr(0,17)+"...")}t.length==document.getElementById(e._getItemListIdentifier()).querySelectorAll("ul li").length&&(i="All selected"),document.getElementById(e._getInputFieldIdentifier()).value=i||""},_forceUpdate:function(){var e=document.getElementById(this._getInputBadgeIdentifier());if(e.style.visibility="hidden",0!=this._itemCounter){e.innerHTML=this._itemCounter,e.style.visibility="visible";var t=e.nextElementSibling;this._itemCounter<10?(e.style.left="-45px",t.style.marginLeft="-42px"):this._itemCounter<100?(e.style.left="-50px",t.style.marginLeft="-47px"):this._itemCounter<1e3?(e.style.left="-55px",t.style.marginLeft="-52px"):this._itemCounter<1e4&&(e.style.left="-60px",t.style.marginLeft="-57px")}},_items:void 0,_itemCounter:0,_isEnabled:!0,_getItems:function(){if(null==this._items){for(var e=[],t=this._item.options,i=0;i<t.length;i++){var n={id:t[i].value,index:i,text:t[i].innerHTML,selected:!!t[i].selected,selectElement:t[i]};e.push(n)}this._items=e}return this._items},_getItemUniqueIdentifier:function(){var e=this._item.getAttribute("id"),t=this._item.getAttribute("name");if(!e&&!t)throw"Multiselect: object does not contain any identifier (id or name)";return e||t},_getIdentifier:function(){return this._getItemUniqueIdentifier()+"_multiSelect"},_getInputFieldIdentifier:function(){return this._getItemUniqueIdentifier()+"_input"},_getItemListIdentifier:function(){return this._getItemUniqueIdentifier()+"_itemList"},_getInputBadgeIdentifier:function(){return this._getItemUniqueIdentifier()+"_inputCount"}},window.multiselects=[],"undefined"!=typeof $?$.fn.multiselect=function(){var e=[];return window.multiselects._items||(window.multiselects._items=[]),0!=this.length&&$(this).each((function(t,i){var l=window.multiselects._items.indexOf(i);if(-1==l){var c=new n(i);window.multiselects.push(c),window.multiselects._items.push(i),e.push(c)}else e.push(window.multiselects[l])})),1==e.length?e[0]:$(e)}:document.multiselect=function(e){var t=[];return window.multiselects._items||(window.multiselects._items=[]),i.each(document.querySelectorAll(e),(function(e){var i=window.multiselects._items.indexOf(e);if(-1==i){var l=new n(e);window.multiselects.push(l),window.multiselects._items.push(e),t.push(l)}else t.push(window.multiselects[i])})),1==t.length?t[0]:t}}]);
\ No newline at end of file
diff --git a/scripts/multiselect.core.js b/scripts/multiselect.core.js
index 7d4b258..e9a5f4c 100644
--- a/scripts/multiselect.core.js
+++ b/scripts/multiselect.core.js
@@ -123,6 +123,7 @@ Multiselect.prototype = {
 
 		label.appendChild(checkBox);
 		label.appendChild(textBox);
+		label.tabIndex = -1;
 		
 		result.appendChild(label);
 		return result;
@@ -139,8 +140,6 @@ Multiselect.prototype = {
 				self.select(e.id);
 			});
 		}
-		
-		this._hideList(this);
 	},
 
 	_initIsEnabled: function() {
@@ -231,19 +230,7 @@ Multiselect.prototype = {
 	//append required events
 	_appendEvents: function () {
 		var self = this;
-		document.getElementById(self._getInputFieldIdentifier()).addEventListener('focus', function (event) {
-			self._showList(self);
-			document.getElementById(self._getInputFieldIdentifier()).value = '';
-			m_helper.each(window.multiselects, function(e) {
-				if (document.getElementById(e._getItemListIdentifier()).offsetParent &&
-					m_helper.parent(event.target, e._getIdentifier())) {
-					e._hideList(self);
-				}
-			});
-		});
-
 		document.getElementById(self._getInputFieldIdentifier()).addEventListener('click', function () {
-			self._showList(self);
 			document.getElementById(self._getInputFieldIdentifier()).value = '';
 		});
 
@@ -255,10 +242,6 @@ Multiselect.prototype = {
 			}
 		});
 
-		document.getElementById(self._getItemListIdentifier()).addEventListener('mouseover', function () {
-			self._showList(self);
-		});
-		
 		m_helper.each(document.getElementById(self._getIdentifier()).querySelectorAll('.multiselect-checkbox'),
 			function(e) {
 				e.addEventListener('change', function(event) {
@@ -310,6 +293,7 @@ Multiselect.prototype = {
 			self._updateSelectAll(self);
 		}
 
+		self._updateText(self);
 		self._forceUpdate();
 	},
 	
@@ -362,19 +346,6 @@ Multiselect.prototype = {
 		}
 	},
 	
-	_hideList: function (context, event) {
-		m_helper.setUnactive(document.getElementById(context._getItemListIdentifier()));
-		
-		m_helper.show(document.getElementById(context._getItemListIdentifier()).querySelector('span'));
-		m_helper.show(document.getElementById(context._getItemListIdentifier()).querySelector('hr'));
-		m_helper.showAll(document.getElementById(context._getItemListIdentifier()).querySelectorAll('li'));
-
-		context._updateText(context);
-
-		if (event)
-			event.stopPropagation();
-	},
-	
 	_updateText : function(context) {
 		var activeItems = document.getElementById(context._getItemListIdentifier()).querySelectorAll('ul .active');
 		if (activeItems.length > 0) {
@@ -396,10 +367,6 @@ Multiselect.prototype = {
 		document.getElementById(context._getInputFieldIdentifier()).value = val ? val : '';		
 	},
 
-	_showList: function (context) {
-		m_helper.setActive(document.getElementById(context._getItemListIdentifier()));
-	},
-
 	//updates counter
 	_forceUpdate: function () {
 		var badge = document.getElementById(this._getInputBadgeIdentifier());
@@ -494,4 +461,4 @@ Multiselect.prototype = {
 	_getInputBadgeIdentifier: function () {
 		return this._getItemUniqueIdentifier() + '_inputCount';
 	}
-}
\ No newline at end of file
+}
diff --git a/scripts/multiselect.js b/scripts/multiselect.js
index 1779cee..95bbc38 100644
--- a/scripts/multiselect.js
+++ b/scripts/multiselect.js
@@ -27,10 +27,6 @@ if (typeof ($) != 'undefined') {
 
 		return res.length == 1 ? res[0] : $(res);
 	};
-	
-	$(document).click(function (event) {
-		hideMultiselects(event);
-	});
 } else {
 	document.multiselect = function(selector) {
 		var res = [];
@@ -53,17 +49,4 @@ if (typeof ($) != 'undefined') {
 		
 		return res.length == 1 ? res[0] : res;
 	}
-	
-	window.onclick = function(event) {
-		hideMultiselects(event);
-	};
 }
-
-function hideMultiselects(event) {
-	m_helper.each(window.multiselects, function(e) {
-		if (document.getElementById(e._getItemListIdentifier()).offsetParent &&
-				!m_helper.parent(event.target, e._getIdentifier())) {
-			e._hideList(e, event);
-		}
-	});
-}
\ No newline at end of file
diff --git a/styles/multiselect.css b/styles/multiselect.css
index eff8ec4..2bc76bd 100644
--- a/styles/multiselect.css
+++ b/styles/multiselect.css
@@ -17,6 +17,18 @@
 	font-weight : 600;
 }
 
+    /*
+     * Since we gave these labels a tabindex they can potentially get :focus or
+     * :active, and we don't want that to cause any new styling
+     */
+    .multiselect-wrapper label:focus {
+        outline: none;
+    }
+
+    .multiselect-wrapper label:active {
+        outline: none;
+    }
+
 .multiselect-wrapper .multiselect-list {
 	z-index: 1;
 	position: absolute;
@@ -28,7 +40,7 @@
 	margin-top: -2px;
 }
 
-	.multiselect-wrapper .multiselect-list.active {
+	.multiselect-wrapper:focus-within .multiselect-list {
 		display: block;
 	}