diff --git a/README.md b/README.md
index d0baff8..c8c27c4 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ Check out the [example](http://creativeit.github.io/getmdl-select/)
There are three ways to install getmdl-select:
- 1. Using [npm](http://npmjs.org/):
+ 1. Using [npm](http://npmjs.org/):
Use this command in your command line:
```bash
npm install getmdl-select
@@ -51,15 +51,19 @@ To use any MDL component, you must include the minified CSS and JavaScript files
### Example
-Select field.
+Simple select field. To see other examples visit [this page](http://creativeit.github.io/getmdl-select/).
```html
-
-
-
-
-
Belarus
-
Russia
-
+
+
+
+
+
+
Belarus
+
Brazil
+
France
+
Germany
+
Russia
+
```
### Important
@@ -72,11 +76,14 @@ For dynamically usage, you must add `getmdlSelect.init(cssSelector)` in javascri
#### data-val
Every `li` should have its own `data-val` attribute. Choosing any element of select you change `input`'s `data-val` property, which you can get using `document.querySelector(selector).getAttribute('data-val');`, where selector is your `input`'s id.
+#### Pre-selected item
+To set pre-selected value add `data-selected="true"` attribute to corresponding `li` in your list.
+
#### Width
-Initial Select takes the default width (300px). If you want that Select automatically adapt to the maximum width add class `getmdl-select__fullwidth`.
+Initial Select takes the default width (300px). You can change it by overriding the CSS property `width`.
#### Height
-Select automatically adapt to the maximum height. If you want to use small height (300px) and see scroll bar, add class `getmdl-select__fix-height`.
+Options list automatically adapt to the maximum height by content. If you want to use small height (300px) and see scroll bar, add class `getmdl-select__fix-height`.
## LICENSE
See the [LICENSE file](https://github.com/CreativeIT/getmdl-select/blob/master/LICENSE.txt) for license rights and limitations (MIT).
diff --git a/getmdl-select.min.css b/getmdl-select.min.css
index 8637282..384f9a4 100644
--- a/getmdl-select.min.css
+++ b/getmdl-select.min.css
@@ -1,3 +1,3 @@
-.getmdl-select .mdl-icon-toggle__label{float:right;margin-top:-30px;color:rgba(0,0,0,0.4)}.getmdl-select.is-focused .mdl-icon-toggle__label{color:#3f51b5}.getmdl-select .mdl-menu__container{width:100% !important;overflow:hidden}.getmdl-select .mdl-menu__container .mdl-menu .mdl-menu__item{font-size:16px}.getmdl-select__fullwidth .mdl-menu{width:100%}.getmdl-select__fix-height .mdl-menu__container{overflow-y:auto;max-height:300px !important}.getmdl-select__fix-height .mdl-menu.mdl-menu--top-left{bottom:auto;top:0}
+.getmdl-select{outline:none}.getmdl-select .mdl-textfield__input{cursor:pointer}.getmdl-select .selected{background-color:#ddd}.getmdl-select .mdl-icon-toggle__label{float:right;margin-top:-30px;color:rgba(0,0,0,0.4);transform:rotate(0);transition:transform 0.3s}.getmdl-select.is-focused .mdl-icon-toggle__label{color:#3f51b5;transform:rotate(180deg)}.getmdl-select .mdl-menu__container{width:100% !important;margin-top:2px}.getmdl-select .mdl-menu__container .mdl-menu{width:100%}.getmdl-select .mdl-menu__container .mdl-menu .mdl-menu__item{font-size:16px}.getmdl-select__fix-height .mdl-menu__container .mdl-menu{overflow-y:auto;max-height:288px !important}.getmdl-select__fix-height .mdl-menu.mdl-menu--top-left{bottom:auto;top:0}
/*# sourceMappingURL=getmdl-select.min.css.map */
diff --git a/getmdl-select.min.css.map b/getmdl-select.min.css.map
index 12c9839..fe07286 100644
--- a/getmdl-select.min.css.map
+++ b/getmdl-select.min.css.map
@@ -1 +1 @@
-{"version":3,"file":"getmdl-select.min.css","sources":["getmdl-select.scss"],"sourcesContent":[".getmdl-select {\r\n\r\n .mdl-icon-toggle__label {\r\n float: right;\r\n margin-top: -30px;\r\n color: rgba(0, 0, 0, 0.4);\r\n }\r\n &.is-focused {\r\n .mdl-icon-toggle__label {\r\n color: #3f51b5;\r\n }\r\n }\r\n\r\n .mdl-menu__container {\r\n width: 100% !important;\r\n overflow: hidden;\r\n .mdl-menu .mdl-menu__item {\r\n font-size: 16px;\r\n }\r\n }\r\n}\r\n.getmdl-select__fullwidth {\r\n .mdl-menu {\r\n width: 100%;\r\n }\r\n}\r\n\r\n.getmdl-select__fix-height{\r\n .mdl-menu__container{\r\n overflow-y: auto;\r\n max-height: 300px !important;\r\n }\r\n .mdl-menu.mdl-menu--top-left {\r\n bottom: auto;\r\n top: 0;\r\n }\r\n}"],"mappings":"AAAA,AAEE,cAFY,CAEZ,uBAAuB,AAAC,CACtB,KAAK,CAAE,KAAM,CACb,UAAU,CAAE,KAAM,CAClB,KAAK,CAAE,eAAI,CACZ,AANH,AAQI,cARU,AAOX,WAAW,CACV,uBAAuB,AAAC,CACtB,KAAK,CAAE,OAAQ,CAChB,AAVL,AAaE,cAbY,CAaZ,oBAAoB,AAAC,CACnB,KAAK,CAAE,eAAgB,CACvB,QAAQ,CAAE,MAAO,CAIlB,AAnBH,AAgBc,cAhBA,CAaZ,oBAAoB,CAGlB,SAAS,CAAC,eAAe,AAAC,CACxB,SAAS,CAAE,IAAK,CACjB,AAGL,AACE,yBADuB,CACvB,SAAS,AAAC,CACR,KAAK,CAAE,IAAK,CACb,AAGH,AACE,0BADwB,CACxB,oBAAoB,AAAA,CAClB,UAAU,CAAE,IAAK,CACjB,UAAU,CAAE,gBAAiB,CAC9B,AAJH,AAKW,0BALe,CAKxB,SAAS,AAAA,mBAAmB,AAAC,CAC3B,MAAM,CAAE,IAAK,CACb,GAAG,CAAE,CAAE,CACR","names":[]}
\ No newline at end of file
+{"version":3,"file":"getmdl-select.min.css","sources":["getmdl-select.scss"],"sourcesContent":[".getmdl-select {\r\n outline: none;\r\n .mdl-textfield__input {\r\n cursor: pointer;\r\n }\r\n .selected {\r\n background-color: #ddd;\r\n }\r\n .mdl-icon-toggle__label {\r\n float: right;\r\n margin-top: -30px;\r\n color: rgba(0, 0, 0, 0.4);\r\n transform: rotate(0);\r\n transition: transform 0.3s;\r\n }\r\n &.is-focused {\r\n .mdl-icon-toggle__label {\r\n color: #3f51b5;\r\n transform: rotate(180deg);\r\n }\r\n }\r\n\r\n .mdl-menu__container {\r\n width: 100% !important;\r\n margin-top: 2px;\r\n .mdl-menu {\r\n width: 100%;\r\n .mdl-menu__item {\r\n font-size: 16px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.getmdl-select__fix-height {\r\n .mdl-menu__container .mdl-menu {\r\n overflow-y: auto;\r\n max-height: 288px !important;\r\n }\r\n .mdl-menu.mdl-menu--top-left {\r\n bottom: auto;\r\n top: 0;\r\n }\r\n}"],"mappings":"AAAA,AAAA,cAAc,AAAC,CACb,OAAO,CAAE,IAAK,CA+Bf,AAhCD,AAEE,cAFY,CAEZ,qBAAqB,AAAC,CACpB,MAAM,CAAE,OAAQ,CACjB,AAJH,AAKE,cALY,CAKZ,SAAS,AAAC,CACR,gBAAgB,CAAE,IAAK,CACxB,AAPH,AAQE,cARY,CAQZ,uBAAuB,AAAC,CACtB,KAAK,CAAE,KAAM,CACb,UAAU,CAAE,KAAM,CAClB,KAAK,CAAE,eAAI,CACX,SAAS,CAAE,SAAM,CACjB,UAAU,CAAE,cAAe,CAC5B,AAdH,AAgBI,cAhBU,AAeX,WAAW,CACV,uBAAuB,AAAC,CACtB,KAAK,CAAE,OAAQ,CACf,SAAS,CAAE,cAAM,CAClB,AAnBL,AAsBE,cAtBY,CAsBZ,oBAAoB,AAAC,CACnB,KAAK,CAAE,eAAgB,CACvB,UAAU,CAAE,GAAI,CAOjB,AA/BH,AAyBI,cAzBU,CAsBZ,oBAAoB,CAGlB,SAAS,AAAC,CACR,KAAK,CAAE,IAAK,CAIb,AA9BL,AA2BM,cA3BQ,CAsBZ,oBAAoB,CAGlB,SAAS,CAEP,eAAe,AAAC,CACd,SAAS,CAAE,IAAK,CACjB,AAKP,AACuB,0BADG,CACxB,oBAAoB,CAAC,SAAS,AAAC,CAC7B,UAAU,CAAE,IAAK,CACjB,UAAU,CAAE,gBAAiB,CAC9B,AAJH,AAKW,0BALe,CAKxB,SAAS,AAAA,mBAAmB,AAAC,CAC3B,MAAM,CAAE,IAAK,CACb,GAAG,CAAE,CAAE,CACR","names":[]}
\ No newline at end of file
diff --git a/getmdl-select.min.js b/getmdl-select.min.js
index 1abfad5..197dfeb 100644
--- a/getmdl-select.min.js
+++ b/getmdl-select.min.js
@@ -1,2 +1,2 @@
-"use strict";!function(){function e(){getmdlSelect.init(".getmdl-select")}window.addEventListener?window.addEventListener("load",e,!1):window.attachEvent&&window.attachEvent("onload",e)}();var getmdlSelect={_defaultValue:{width:300},_addEventListeners:function(e){var t=e.querySelector("input"),n=e.querySelectorAll("li"),l=e.querySelector(".mdl-js-menu");t.onkeydown=function(e){38!=e.keyCode&&40!=e.keyCode||l.MaterialMenu.show()},l.onkeydown=function(e){13==e.keyCode&&t.focus()},[].forEach.call(n,function(n){n.onclick=function(){var a=n.textContent.trim();if(t.value=a,e.MaterialTextfield.change(a),setTimeout(function(){e.MaterialTextfield.updateClasses_()},250),t.dataset.val=n.dataset.val||"","createEvent"in document){var d=document.createEvent("HTMLEvents");d.initEvent("change",!1,!0),l.MaterialMenu.hide(),t.dispatchEvent(d)}else t.fireEvent("onchange")}})},init:function(e,t){var n=document.querySelectorAll(e);[].forEach.call(n,function(e){getmdlSelect._addEventListeners(e);var n=t||(e.querySelector(".mdl-menu").offsetWidth?e.querySelector(".mdl-menu").offsetWidth:getmdlSelect._defaultValue.width);e.style.width=n+"px",componentHandler.upgradeElement(e),componentHandler.upgradeElement(e.querySelector("ul"))})}};
+"use strict";!function(){function e(){getmdlSelect.init(".getmdl-select")}window.addEventListener?window.addEventListener("load",e,!1):window.attachEvent&&window.attachEvent("onload",e)}();var getmdlSelect={_defaultValue:{width:300},_addEventListeners:function(e){var t=e.querySelector("input"),n=e.querySelector('input[type="hidden"]'),l=e.querySelectorAll("li"),a=e.querySelector(".mdl-js-menu"),o=e.querySelector(".mdl-icon-toggle__label"),i="",c="",s="",u=!1,d=function(o){var i=o.textContent.trim();if(t.value=i,l.forEach(function(e){e.classList.remove("selected")}),o.classList.add("selected"),e.MaterialTextfield.change(i),setTimeout(function(){e.MaterialTextfield.updateClasses_()},250),n.value=o.dataset.val||"",c=t.value,s=n.value,"createEvent"in document){var u=document.createEvent("HTMLEvents");u.initEvent("change",!1,!0),a.MaterialMenu.hide(),t.dispatchEvent(u)}else t.fireEvent("onchange")},r=function(){u=!1,t.value=c,n.value=s,e.querySelector(".mdl-menu__container").classList.contains("is-visible")||e.classList.remove("is-focused");var l=document.querySelectorAll(".getmdl-select .mdl-js-menu");[].forEach.call(l,function(e){e.MaterialMenu.hide()});var o=new Event("closeSelect");a.dispatchEvent(o)};document.body.addEventListener("click",r,!1),e.onkeydown=function(l){9==l.keyCode&&(t.value=c,n.value=s,a.MaterialMenu.hide(),e.classList.remove("is-focused"))},t.onfocus=function(e){a.MaterialMenu.show(),a.focus(),u=!0},t.onblur=function(e){e.stopPropagation()},t.onclick=function(t){t.stopPropagation(),a.classList.contains("is-visible")?(a.MaterialMenu.hide(),u=!1):(a.MaterialMenu.show(),r(),e.classList.add("is-focused"),u=!0)},t.onkeydown=function(l){27==l.keyCode&&(t.value=c,n.value=s,a.MaterialMenu.hide(),e.MaterialTextfield.onBlur_(),""!==i&&(e.querySelector(".mdl-textfield__label").textContent=i,i=""))},a.addEventListener("closeSelect",function(l){t.value=c,n.value=s,e.classList.remove("is-focused"),""!==i&&(e.querySelector(".mdl-textfield__label").textContent=i,i="")}),a.onkeydown=function(l){27==l.keyCode&&(t.value=c,n.value=s,e.classList.remove("is-focused"),""!==i&&(e.querySelector(".mdl-textfield__label").textContent=i,i=""))},o&&(o.onclick=function(l){l.stopPropagation(),u?(a.MaterialMenu.hide(),u=!1,e.classList.remove("is-focused"),e.MaterialTextfield.onBlur_(),t.value=c,n.value=s):(r(),e.MaterialTextfield.onFocus_(),t.focus(),a.MaterialMenu.show(),u=!0)}),[].forEach.call(l,function(n){n.onfocus=function(){e.classList.add("is-focused");var l=n.textContent.trim();t.value=l,e.classList.contains("mdl-textfield--floating-label")||""!=i||(i=e.querySelector(".mdl-textfield__label").textContent.trim(),e.querySelector(".mdl-textfield__label").textContent="")},n.onclick=function(){d(n)},n.dataset.selected&&d(n)})},init:function(e){var t=document.querySelectorAll(e);[].forEach.call(t,function(e){getmdlSelect._addEventListeners(e),componentHandler.upgradeElement(e),componentHandler.upgradeElement(e.querySelector("ul"))})}};
//# sourceMappingURL=getmdl-select.min.js.map
\ No newline at end of file
diff --git a/getmdl-select.min.js.map b/getmdl-select.min.js.map
index f5b9a71..d7c6d1b 100644
--- a/getmdl-select.min.js.map
+++ b/getmdl-select.min.js.map
@@ -1 +1 @@
-{"version":3,"sources":["src\\js\\getmdl-select.js"],"names":["whenLoaded","getmdlSelect","init","window","addEventListener","attachEvent","_defaultValue","width","_addEventListeners","dropdown","input","querySelector","list","querySelectorAll","menu","onkeydown","event","keyCode","show","focus","forEach","call","li","onclick","value","textContent","trim","MaterialTextfield","change","setTimeout","updateClasses_","dataset","val","document","evt","createEvent","initEvent","hide","dispatchEvent","fireEvent","selector","widthDef","dropdowns","i","offsetWidth","style","componentHandler","upgradeElement"],"mappings":"AAAA,cAII,WACI,QAASA,KACLC,aAAaC,KAAK,kBAGtBC,OAAOC,iBAAmBD,OAAOC,iBAAiB,OAAQJ,GAAY,GAASG,OAAOE,aAAeF,OAAOE,YAAY,SAAUL,KAGtI,IAAIC,eACAK,eACIC,MAAO,KAEXC,mBAAoB,SAA4BC,GAC5C,GAAIC,GAAQD,EAASE,cAAc,SAC/BC,EAAOH,EAASI,iBAAiB,MACjCC,EAAOL,EAASE,cAAc,eAGlCD,GAAMK,UAAY,SAAUC,GACH,IAAjBA,EAAMC,SAAkC,IAAjBD,EAAMC,SAC7BH,EAAmB,aAAEI,QAK7BJ,EAAKC,UAAY,SAAUC,GACF,IAAjBA,EAAMC,SACNP,EAAMS,YAIXC,QAAQC,KAAKT,EAAM,SAAUU,GAC5BA,EAAGC,QAAU,WACT,GAAIC,GAAQF,EAAGG,YAAYC,MAU3B,IATAhB,EAAMc,MAAQA,EACdf,EAASkB,kBAAkBC,OAAOJ,GAClCK,WAAW,WACPpB,EAASkB,kBAAkBG,kBAC5B,KAGHpB,EAAMqB,QAAQC,IAAMV,EAAGS,QAAQC,KAAO,GAElC,eAAiBC,UAAU,CAC3B,GAAIC,GAAMD,SAASE,YAAY,aAC/BD,GAAIE,UAAU,UAAU,GAAO,GAC/BtB,EAAmB,aAAEuB,OACrB3B,EAAM4B,cAAcJ,OAEpBxB,GAAM6B,UAAU,gBAKhCrC,KAAM,SAAcsC,EAAUC,GAC1B,GAAIC,GAAYT,SAASpB,iBAAiB2B,MACvCpB,QAAQC,KAAKqB,EAAW,SAAUC,GACjC1C,aAAaO,mBAAmBmC,EAChC,IAAIpC,GAAQkC,IAAsBE,EAAEhC,cAAc,aAAaiC,YAAcD,EAAEhC,cAAc,aAAaiC,YAAc3C,aAAaK,cAAcC,MACnJoC,GAAEE,MAAMtC,MAAQA,EAAQ,KACxBuC,iBAAiBC,eAAeJ,GAChCG,iBAAiBC,eAAeJ,EAAEhC,cAAc","file":"getmdl-select.min.js","sourceRoot":"D:\\projects\\CreativeIt\\getmdl-select\\getmdl-select"}
\ No newline at end of file
+{"version":3,"sources":["src\\js\\getmdl-select.js"],"names":["whenLoaded","getmdlSelect","init","window","addEventListener","attachEvent","_defaultValue","width","_addEventListeners","dropdown","input","querySelector","hiddenInput","list","querySelectorAll","menu","arrow","label","previousValue","previousDataVal","opened","setSlectedItem","li","value","textContent","trim","forEach","classList","remove","add","MaterialTextfield","change","setTimeout","updateClasses_","dataset","val","document","evt","createEvent","initEvent","hide","dispatchEvent","fireEvent","hideAllMenus","contains","menus","call","event","Event","body","onkeydown","keyCode","onfocus","e","show","focus","onblur","stopPropagation","onclick","onBlur_","onFocus_","selected","selector","dropdowns","componentHandler","upgradeElement"],"mappings":"AAAA,cAII,WACI,QAASA,KACLC,aAAaC,KAAK,kBAGtBC,OAAOC,iBAAmBD,OAAOC,iBAAiB,OAAQJ,GAAY,GAASG,OAAOE,aAAeF,OAAOE,YAAY,SAAUL,KAGtI,IAAIC,eACAK,eACIC,MAAO,KAEXC,mBAAoB,SAA4BC,GAC5C,GAAIC,GAAQD,EAASE,cAAc,SAC/BC,EAAcH,EAASE,cAAc,wBACrCE,EAAOJ,EAASK,iBAAiB,MACjCC,EAAON,EAASE,cAAc,gBAC9BK,EAAQP,EAASE,cAAc,2BAC/BM,EAAQ,GACRC,EAAgB,GAChBC,EAAkB,GAClBC,GAAS,EAETC,EAAiB,SAAwBC,GACzC,GAAIC,GAAQD,EAAGE,YAAYC,MAiB3B,IAhBAf,EAAMa,MAAQA,EACdV,EAAKa,QAAQ,SAAUJ,GACnBA,EAAGK,UAAUC,OAAO,cAExBN,EAAGK,UAAUE,IAAI,YACjBpB,EAASqB,kBAAkBC,OAAOR,GAClCS,WAAW,WACPvB,EAASqB,kBAAkBG,kBAC5B,KAGHrB,EAAYW,MAAQD,EAAGY,QAAQC,KAAO,GAEtCjB,EAAgBR,EAAMa,MACtBJ,EAAkBP,EAAYW,MAE1B,eAAiBa,UAAU,CAC3B,GAAIC,GAAMD,SAASE,YAAY,aAC/BD,GAAIE,UAAU,UAAU,GAAO,GAC/BxB,EAAmB,aAAEyB,OACrB9B,EAAM+B,cAAcJ,OAEpB3B,GAAMgC,UAAU,aAIpBC,EAAe,WACfvB,GAAS,EACTV,EAAMa,MAAQL,EACdN,EAAYW,MAAQJ,EACfV,EAASE,cAAc,wBAAwBgB,UAAUiB,SAAS,eACnEnC,EAASkB,UAAUC,OAAO,aAE9B,IAAIiB,GAAQT,SAAStB,iBAAiB,kCACnCY,QAAQoB,KAAKD,EAAO,SAAU9B,GAC7BA,EAAmB,aAAEyB,QAEzB,IAAIO,GAAQ,GAAIC,OAAM,cACtBjC,GAAK0B,cAAcM,GAEvBX,UAASa,KAAK7C,iBAAiB,QAASuC,GAAc,GAGtDlC,EAASyC,UAAY,SAAUH,GACN,GAAjBA,EAAMI,UACNzC,EAAMa,MAAQL,EACdN,EAAYW,MAAQJ,EACpBJ,EAAmB,aAAEyB,OACrB/B,EAASkB,UAAUC,OAAO,gBAKlClB,EAAM0C,QAAU,SAAUC,GACtBtC,EAAmB,aAAEuC,OACrBvC,EAAKwC,QACLnC,GAAS,GAGbV,EAAM8C,OAAS,SAAUH,GACrBA,EAAEI,mBAIN/C,EAAMgD,QAAU,SAAUL,GACtBA,EAAEI,kBACG1C,EAAKY,UAAUiB,SAAS,eAMzB7B,EAAmB,aAAEyB,OACrBpB,GAAS,IANTL,EAAmB,aAAEuC,OACrBX,IACAlC,EAASkB,UAAUE,IAAI,cACvBT,GAAS,IAOjBV,EAAMwC,UAAY,SAAUH,GACH,IAAjBA,EAAMI,UACNzC,EAAMa,MAAQL,EACdN,EAAYW,MAAQJ,EACpBJ,EAAmB,aAAEyB,OACrB/B,EAASqB,kBAAkB6B,UACb,KAAV1C,IACAR,EAASE,cAAc,yBAAyBa,YAAcP,EAC9DA,EAAQ,MAKpBF,EAAKX,iBAAiB,cAAe,SAAUiD,GAC3C3C,EAAMa,MAAQL,EACdN,EAAYW,MAAQJ,EACpBV,EAASkB,UAAUC,OAAO,cACZ,KAAVX,IACAR,EAASE,cAAc,yBAAyBa,YAAcP,EAC9DA,EAAQ,MAKhBF,EAAKmC,UAAY,SAAUH,GACF,IAAjBA,EAAMI,UACNzC,EAAMa,MAAQL,EACdN,EAAYW,MAAQJ,EACpBV,EAASkB,UAAUC,OAAO,cACZ,KAAVX,IACAR,EAASE,cAAc,yBAAyBa,YAAcP,EAC9DA,EAAQ,MAKhBD,IACAA,EAAM0C,QAAU,SAAUL,GACtBA,EAAEI,kBACErC,GACAL,EAAmB,aAAEyB,OACrBpB,GAAS,EACTX,EAASkB,UAAUC,OAAO,cAC1BnB,EAASqB,kBAAkB6B,UAC3BjD,EAAMa,MAAQL,EACdN,EAAYW,MAAQJ,IAEpBwB,IACAlC,EAASqB,kBAAkB8B,WAC3BlD,EAAM6C,QACNxC,EAAmB,aAAEuC,OACrBlC,GAAS,QAKlBM,QAAQoB,KAAKjC,EAAM,SAAUS,GAC5BA,EAAG8B,QAAU,WACT3C,EAASkB,UAAUE,IAAI,aACvB,IAAIN,GAAQD,EAAGE,YAAYC,MAC3Bf,GAAMa,MAAQA,EACTd,EAASkB,UAAUiB,SAAS,kCAA6C,IAAT3B,IACjEA,EAAQR,EAASE,cAAc,yBAAyBa,YAAYC,OACpEhB,EAASE,cAAc,yBAAyBa,YAAc,KAItEF,EAAGoC,QAAU,WACTrC,EAAeC,IA4BfA,EAAGY,QAAQ2B,UACXxC,EAAeC,MAI3BpB,KAAM,SAAc4D,GAChB,GAAIC,GAAY3B,SAAStB,iBAAiBgD,MACvCpC,QAAQoB,KAAKiB,EAAW,SAAUtD,GACjCR,aAAaO,mBAAmBC,GAChCuD,iBAAiBC,eAAexD,GAChCuD,iBAAiBC,eAAexD,EAASE,cAAc","file":"getmdl-select.min.js","sourceRoot":"E:\\html5\\GitHub\\getmdl-select"}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3617a6c..a9109a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "getmdl-select",
- "version": "1.1.0",
+ "version": "2.0.0",
"description": "select for material-design-lite",
"repository": {
"type": "git",
diff --git a/src/js/getmdl-select.js b/src/js/getmdl-select.js
index 9617b60..3a5cb46 100644
--- a/src/js/getmdl-select.js
+++ b/src/js/getmdl-select.js
@@ -12,59 +12,178 @@
}());
var getmdlSelect = {
- _defaultValue: {
- width: 300
- },
_addEventListeners: function (dropdown) {
var input = dropdown.querySelector('input');
+ var hiddenInput = dropdown.querySelector('input[type="hidden"]');
var list = dropdown.querySelectorAll('li');
var menu = dropdown.querySelector('.mdl-js-menu');
+ var arrow = dropdown.querySelector('.mdl-icon-toggle__label');
+ var label = '';
+ var previousValue = '';
+ var previousDataVal = '';
+ var opened = false;
- //show menu on arrow down or arrow up
- input.onkeydown = function (event) {
- if (event.keyCode == 38 || event.keyCode == 40) {
+ var setSelectedItem = function (li) {
+ var value = li.textContent.trim();
+ input.value = value;
+ list.forEach(function (li) {
+ li.classList.remove('selected');
+ });
+ li.classList.add('selected');
+ dropdown.MaterialTextfield.change(value); // handles css class changes
+ setTimeout(function () {
+ dropdown.MaterialTextfield.updateClasses_(); //update css class
+ }, 250);
+
+ // update input with the "id" value
+ hiddenInput.value = li.dataset.val || '';
+
+ previousValue = input.value;
+ previousDataVal = hiddenInput.value;
+
+ if ("createEvent" in document) {
+ var evt = document.createEvent("HTMLEvents");
+ evt.initEvent("change", false, true);
+ menu['MaterialMenu'].hide();
+ input.dispatchEvent(evt);
+ } else {
+ input.fireEvent("onchange");
+ }
+ }
+
+ var hideAllMenus = function () {
+ opened = false;
+ input.value = previousValue;
+ hiddenInput.value = previousDataVal;
+ if (!dropdown.querySelector('.mdl-menu__container').classList.contains('is-visible')) {
+ dropdown.classList.remove('is-focused');
+ }
+ var menus = document.querySelectorAll('.getmdl-select .mdl-js-menu');
+ [].forEach.call(menus, function (menu) {
+ menu['MaterialMenu'].hide();
+ });
+ var event = new Event('closeSelect');
+ menu.dispatchEvent(event);
+ };
+ document.body.addEventListener('click', hideAllMenus, false);
+
+ //hide previous select after press TAB
+ dropdown.onkeydown = function (event) {
+ if (event.keyCode == 9) {
+ input.value = previousValue;
+ hiddenInput.value = previousDataVal;
+ menu['MaterialMenu'].hide();
+ dropdown.classList.remove('is-focused');
+ }
+ };
+
+ //show select if it have focus
+ input.onfocus = function (e) {
+ menu['MaterialMenu'].show();
+ menu.focus();
+ opened = true;
+ };
+
+ input.onblur = function (e) {
+ e.stopPropagation();
+ };
+
+ //hide all old opened selects and opening just clicked select
+ input.onclick = function (e) {
+ e.stopPropagation();
+ if (!menu.classList.contains('is-visible')) {
menu['MaterialMenu'].show();
+ hideAllMenus();
+ dropdown.classList.add('is-focused');
+ opened = true;
+ } else {
+ menu['MaterialMenu'].hide();
+ opened = false;
}
};
- //return focus to input
- menu.onkeydown = function (event) {
- if (event.keyCode == 13) {
- input.focus();
+ input.onkeydown = function (event) {
+ if (event.keyCode == 27) {
+ input.value = previousValue;
+ hiddenInput.value = previousDataVal;
+ menu['MaterialMenu'].hide();
+ dropdown.MaterialTextfield.onBlur_();
+ if (label !== '') {
+ dropdown.querySelector('.mdl-textfield__label').textContent = label;
+ label = '';
+ }
}
};
- [].forEach.call(list, function (li) {
- li.onclick = function () {
- var value = li.textContent.trim();
- input.value = value;
- dropdown.MaterialTextfield.change(value); // handles css class changes
- setTimeout(function () {
- dropdown.MaterialTextfield.updateClasses_(); //update css class
- }, 250);
+ menu.addEventListener('closeSelect', function (e) {
+ input.value = previousValue;
+ hiddenInput.value = previousDataVal;
+ dropdown.classList.remove('is-focused');
+ if (label !== '') {
+ dropdown.querySelector('.mdl-textfield__label').textContent = label;
+ label = '';
+ }
+ });
- // update input with the "id" value
- input.dataset.val = li.dataset.val || '';
+ //set previous value and data-val if ESC was pressed
+ menu.onkeydown = function (event) {
+ if (event.keyCode == 27) {
+ input.value = previousValue;
+ hiddenInput.value = previousDataVal;
+ dropdown.classList.remove('is-focused');
+ if (label !== '') {
+ dropdown.querySelector('.mdl-textfield__label').textContent = label;
+ label = '';
+ }
+ }
+ };
- if ("createEvent" in document) {
- var evt = document.createEvent("HTMLEvents");
- evt.initEvent("change", false, true);
+ if (arrow) {
+ arrow.onclick = function (e) {
+ e.stopPropagation();
+ if (opened) {
menu['MaterialMenu'].hide();
- input.dispatchEvent(evt);
+ opened = false;
+ dropdown.classList.remove('is-focused');
+ dropdown.MaterialTextfield.onBlur_();
+ input.value = previousValue;
+ hiddenInput.value = previousDataVal;
} else {
- input.fireEvent("onchange");
+ hideAllMenus();
+ dropdown.MaterialTextfield.onFocus_();
+ input.focus();
+ menu['MaterialMenu'].show();
+ opened = true;
+ }
+ };
+ }
+
+ [].forEach.call(list, function (li) {
+ li.onfocus = function () {
+ dropdown.classList.add('is-focused');
+ var value = li.textContent.trim();
+ input.value = value;
+ if (!dropdown.classList.contains('mdl-textfield--floating-label') && label == '') {
+ label = dropdown.querySelector('.mdl-textfield__label').textContent.trim();
+ dropdown.querySelector('.mdl-textfield__label').textContent = '';
}
};
+
+ li.onclick = function () {
+ setSelectedItem(li);
+ };
+
+ if (li.dataset.selected) {
+ setSelectedItem(li);
+ }
});
},
- init: function (selector, widthDef) {
+ init: function (selector) {
var dropdowns = document.querySelectorAll(selector);
- [].forEach.call(dropdowns, function (i) {
- getmdlSelect._addEventListeners(i);
- var width = widthDef ? widthDef : (i.querySelector('.mdl-menu').offsetWidth ? i.querySelector('.mdl-menu').offsetWidth : getmdlSelect._defaultValue.width);
- i.style.width = width + 'px';
- componentHandler.upgradeElement(i);
- componentHandler.upgradeElement(i.querySelector('ul'));
+ [].forEach.call(dropdowns, function (dropdown) {
+ getmdlSelect._addEventListeners(dropdown);
+ componentHandler.upgradeElement(dropdown);
+ componentHandler.upgradeElement(dropdown.querySelector('ul'));
});
}
};
diff --git a/src/scss/getmdl-select.scss b/src/scss/getmdl-select.scss
index de63930..03100f1 100644
--- a/src/scss/getmdl-select.scss
+++ b/src/scss/getmdl-select.scss
@@ -1,34 +1,41 @@
.getmdl-select {
-
+ outline: none;
+ .mdl-textfield__input {
+ cursor: pointer;
+ }
+ .selected {
+ background-color: #ddd;
+ }
.mdl-icon-toggle__label {
float: right;
margin-top: -30px;
color: rgba(0, 0, 0, 0.4);
+ transform: rotate(0);
+ transition: transform 0.3s;
}
&.is-focused {
.mdl-icon-toggle__label {
color: #3f51b5;
+ transform: rotate(180deg);
}
}
.mdl-menu__container {
width: 100% !important;
- overflow: hidden;
- .mdl-menu .mdl-menu__item {
- font-size: 16px;
+ margin-top: 2px;
+ .mdl-menu {
+ width: 100%;
+ .mdl-menu__item {
+ font-size: 16px;
+ }
}
}
}
-.getmdl-select__fullwidth {
- .mdl-menu {
- width: 100%;
- }
-}
-.getmdl-select__fix-height{
- .mdl-menu__container{
+.getmdl-select__fix-height {
+ .mdl-menu__container .mdl-menu {
overflow-y: auto;
- max-height: 300px !important;
+ max-height: 288px !important;
}
.mdl-menu.mdl-menu--top-left {
bottom: auto;