datalist-polyfill - npm Package Compare versions

Comparing version 1.14.1 to 1.14.2

bower.json

 {
   "name": "datalist-polyfill",
   "description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",
-  "version": "1.14.1",
+  "version": "1.14.2",
   "homepage": "https://github.com/mfranzke/datalist-polyfill",
@@ -6,0 +6,0 @@ "authors": [{

CHANGELOG.md

@@ -9,2 +9,6 @@ # Changelog
 
+## [1.14.2] - 2018-06-20
+### Fixed
+- A small bug sadly slipped through that doesn't hide the polyfilling select on non-matching option elements regarding the value.
+
 ## [1.14.1] - 2018-06-20
@@ -11,0 +15,0 @@ ### Added

datalist-polyfill.js

@@ -109,4 +109,4 @@ /*
 
-          prepOptions(dataList, input);
-          toggleVisibility(dataList.getElementsByClassName(classNamePolyfillingSelect)[0]);
+          // prepare the options and toggle the visiblity afterwards
+          toggleVisibility(dataList.getElementsByClassName(classNamePolyfillingSelect)[0], prepOptions(dataList, eventTarget));
         }
@@ -148,3 +148,6 @@ }
 
-              prepOptions(dataList, eventTarget);
+              // prepare the options
+              if (prepOptions(dataList, eventTarget)) {
+                visible = true;
+              }
 
@@ -171,4 +174,2 @@ var dataListSelectOptionsLength = dataListSelect.options.length,
 
-              visible = true;
-
               // on arrow up or down keys, focus the select
@@ -267,2 +268,4 @@ if (keyOpen) {
 
+    return dataListSelectOptionsLength;
+
   };
@@ -269,0 +272,0 @@

datalist-polyfill.min.js

@@ -6,2 +6,2 @@ /*
 */
-!function(){"use strict";if("list"in document.createElement("input")&&!(!document.createElement("datalist")||!window.HTMLDataListElement))return!1;!function(e){e&&e.prototype&&void 0===e.prototype.list&&Object.defineProperty(e.prototype,"list",{get:function(){if("object"==typeof this&&this instanceof e){var t=this.getAttribute("list");return document.getElementById(t)}return null}})}(window.HTMLInputElement),function(e){e&&e.prototype&&void 0===e.prototype.options&&Object.defineProperty(e.prototype,"options",{get:function(){if("object"==typeof this&&this instanceof e)return this.getElementsByTagName("option")}})}(window.HTMLElement);var e=!1,t=13,i=27,n=38,o=40,r=" / ",a=["text","email","number","search","tel","url"],l="polyfilled",s="polyfilling";window.addEventListener("touchstart",function t(){e=!0,window.removeEventListener("touchstart",t)});var u=window.MutationObserver||window.WebKitMutationObserver;if(void 0!==u)var d=new u(function(e){for(var t=!1,i=0;i<e.length;++i)for(var n=0;n<e[i].addedNodes.length;++n)"datalist"===e[i].target.tagName.toLowerCase()&&(t=e[i].target);if(t){var o=document.querySelector('[list="'+t.id+'"]');if(""!==o.value){var r=t;c(r,o),g(r.getElementsByClassName("polyfilling")[0])}}});var p=function(t){var i=t.target,n=i.tagName.toLowerCase();if(n&&"input"===n&&i.getAttribute("list")){var o=i.getAttribute("list"),r=document.getElementById(o);if(null!==r){var a=r.getElementsByClassName("polyfilling")[0]||m(i,r);if(void 0!==a){var l=!1;if(27!==t.keyCode&&13!==t.keyCode){var s=i.value,u=38===t.keyCode||40===t.keyCode;if(""!==s||u){c(r,i);var d=a.options.length,p=0,f=d-1;if(e)a.selectedIndex=0;else if(-1===a.selectedIndex)switch(t.keyCode){case 38:a.selectedIndex=f;break;case 40:a.selectedIndex=0;break}l=!0,u&&a.focus()}}g(a,l)}}}},c=function(t,i){void 0!==d&&d.disconnect();var n=t.getElementsByClassName("polyfilling")[0]||m(i,t),o=t.querySelectorAll("option:not([disabled]):not(.message)"),r=i.value,a=document.createDocumentFragment(),l=document.createDocumentFragment();if("email"===i.type&&i.multiple){var s=r.split(","),u=s.length-1;r=s[u].trim()}Array.prototype.slice.call(o).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(r.toLowerCase())&&!1===e.disabled){var i=e.getAttribute("label"),n=e.text,o=n.substr(0,t.length+" / ".length),s=t+" / ";n&&!i&&n!==t&&o!==s?e.innerText=t+" / "+n:e.text||(e.innerText=i||t),a.appendChild(e)}else l.appendChild(e)}),n.appendChild(a);var p=n.options.length;n.size=p>10?10:p,n.multiple=!e&&p<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(l),void 0!==d&&d.observe(t,{childList:!0})},f=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&"input"===i&&t.getAttribute("list")){var n=e.type,o=t.getAttribute("list"),r=document.getElementById(o);if(null!==r){var a=r.getElementsByClassName("polyfilling")[0]||m(t,r),l=("focus"===n&&""!==t.value||e.relatedTarget&&e.relatedTarget===a)&&a&&a.querySelector("option:not(:disabled)");if(!new RegExp(" polyfilled ").test(" "+t.className+" ")){switch(t.setAttribute("autocomplete","off"),t.setAttribute("role","textbox"),t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-owns",o),n){case"focus":t.addEventListener("keyup",p),t.addEventListener("focusout",f,!0);break;case"blur":t.removeEventListener("keyup",p),t.removeEventListener("focusout",f,!0);break}t.className+=" polyfilled"}g(a,l)}}},m=function(t,i){var n=t.type;if(a.indexOf(n)>-1&&null!==i){var o=i.title,r=t.getClientRects(),l=window.getComputedStyle(t),s=parseFloat(l.getPropertyValue("margin-right")),u=parseFloat(l.getPropertyValue("margin-left")),d=document.createElement("select");if(d.setAttribute("class","polyfilling"),d.style.position="absolute",g(d,!1),d.setAttribute("aria-live","polite"),d.setAttribute("role","listbox"),e||d.setAttribute("aria-multiselectable","false"),"block"===l.getPropertyValue("display")?d.style.marginTop="-"+l.getPropertyValue("margin-bottom"):("rtl"===l.getPropertyValue("direction")?d.style.marginRight="-"+(r[0].width+u)+"px":d.style.marginLeft="-"+(r[0].width+s)+"px",d.style.marginTop=parseInt(r[0].height+(t.offsetTop-i.offsetTop),10)+"px"),d.style.borderRadius=l.getPropertyValue("border-radius"),d.style.minWidth=r[0].width+"px",e){var p=document.createElement("option");p.innerText=o,p.disabled=!0,p.setAttribute("class","message"),d.appendChild(p)}return i.appendChild(d),e?d.addEventListener("change",v):d.addEventListener("click",v),d.addEventListener("blur",v),d.addEventListener("keyup",v),d}},v=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var n="select"===i?t:t.parentNode,o=n.parentNode,r=o.title,a=e.type,l="keyup"===a&&13!==e.keyCode&&27!==e.keyCode;if("change"===a||"click"===a||"keyup"===a&&13===e.keyCode){var s=o.id,u=document.querySelector('input[list="'+s+'"]'),d=n.value;if(null!==u&&void 0!==d&&d.length>0&&d!==r){var p=u.value,c,f="email"===u.type&&u.multiple,m;f&&(c=p.lastIndexOf(","))>-1?u.value=p.slice(0,c)+","+d:u.value=d,"function"==typeof Event?m=new Event("input",{bubbles:!0}):(m=document.createEvent("Event"),m.initEvent("input",!0,!1)),u.dispatchEvent(m),u.focus(),l=!1}}g(n,l)}},g=function(e,t){void 0===t&&(t=e&&e.querySelector("option:not(:disabled)")),t?e.removeAttribute("hidden"):e.setAttributeNode(document.createAttribute("hidden")),e.setAttribute("aria-hidden",(!t).toString())};document.addEventListener("focus",f,!0)}();
+!function(){"use strict";if("list"in document.createElement("input")&&!(!document.createElement("datalist")||!window.HTMLDataListElement))return!1;!function(e){e&&e.prototype&&void 0===e.prototype.list&&Object.defineProperty(e.prototype,"list",{get:function(){if("object"==typeof this&&this instanceof e){var t=this.getAttribute("list");return document.getElementById(t)}return null}})}(window.HTMLInputElement),function(e){e&&e.prototype&&void 0===e.prototype.options&&Object.defineProperty(e.prototype,"options",{get:function(){if("object"==typeof this&&this instanceof e)return this.getElementsByTagName("option")}})}(window.HTMLElement);var e=!1,t=13,i=27,o=38,l=40,n=" / ",r=["text","email","number","search","tel","url"],a="polyfilled",s="polyfilling";window.addEventListener("touchstart",function t(){e=!0,window.removeEventListener("touchstart",t)});var u=window.MutationObserver||window.WebKitMutationObserver;if(void 0!==u)var d=new u(function(e){for(var t=!1,i=0;i<e.length;++i)for(var o=0;o<e[i].addedNodes.length;++o)"datalist"===e[i].target.tagName.toLowerCase()&&(t=e[i].target);if(t){if(""!==document.querySelector('[list="'+t.id+'"]').value){var l=t;console.log("toggleVisibility","MutationObserver"),v(l.getElementsByClassName("polyfilling")[0],p(l,eventTarget))}}});var c=function(t){var i=t.target,o=i.tagName.toLowerCase();if(o&&"input"===o&&i.getAttribute("list")){var l=i.getAttribute("list"),n=document.getElementById(l);if(null!==n){var r=n.getElementsByClassName("polyfilling")[0]||y(i,n);if(void 0!==r){var a=!1;if(27!==t.keyCode&&13!==t.keyCode){var s=i.value,u=38===t.keyCode||40===t.keyCode;if(console.log("keyOpen:",u),""!==s||u){p(n,i)&&(a=!0);var d=r.options.length,c=0,g=d-1;if(e)r.selectedIndex=0;else if(-1===r.selectedIndex)switch(t.keyCode){case 38:r.selectedIndex=g;break;case 40:r.selectedIndex=0;break}u&&r.focus()}}else console.log("toggleVisibility","ESC or ENTER");console.log("toggleVisibility","inputInputList"),v(r,a)}}}},p=function(t,i){void 0!==d&&d.disconnect();var o=t.getElementsByClassName("polyfilling")[0]||y(i,t),l=t.querySelectorAll("option:not([disabled]):not(.message)"),n=i.value,r=document.createDocumentFragment(),a=document.createDocumentFragment();if("email"===i.type&&i.multiple){var s=n.split(","),u=s.length-1;n=s[u].trim()}Array.prototype.slice.call(l).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(n.toLowerCase())&&!1===e.disabled){var i=e.getAttribute("label"),o=e.text,l=o.substr(0,t.length+" / ".length),s=t+" / ";o&&!i&&o!==t&&l!==s?e.innerText=t+" / "+o:e.text||(e.innerText=i||t),r.appendChild(e)}else a.appendChild(e)}),o.appendChild(r);var c=o.options.length;return o.size=c>10?10:c,o.multiple=!e&&c<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(a),void 0!==d&&d.observe(t,{childList:!0}),c},g=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&"input"===i&&t.getAttribute("list")){var o=e.type,l=t.getAttribute("list"),n=document.getElementById(l);if(null!==n){var r=n.getElementsByClassName("polyfilling")[0]||y(t,n),a=("focus"===o&&""!==t.value||e.relatedTarget&&e.relatedTarget===r)&&r&&r.querySelector("option:not(:disabled)");if(console.log("eventTarget.value: ",t.value),console.log("event.relatedTarget: ",e.relatedTarget),console.log("dataListSelect: ",r),console.log("dataListSelect.querySelector(option:not(:disabled)).length :",r.querySelector("option:not(:disabled)")),!new RegExp(" polyfilled ").test(" "+t.className+" ")){switch(t.setAttribute("autocomplete","off"),t.setAttribute("role","textbox"),t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-owns",l),o){case"focus":t.addEventListener("keyup",c),t.addEventListener("focusout",g,!0);break;case"blur":t.removeEventListener("keyup",c),t.removeEventListener("focusout",g,!0);break}t.className+=" polyfilled"}console.log("toggleVisibility","changesInputList"),v(r,a)}}},y=function(t,i){var o=t.type;if(r.indexOf(o)>-1&&null!==i){var l=i.title,n=t.getClientRects(),a=window.getComputedStyle(t),s=parseFloat(a.getPropertyValue("margin-right")),u=parseFloat(a.getPropertyValue("margin-left")),d=document.createElement("select");if(d.setAttribute("class","polyfilling"),d.style.position="absolute",console.log("toggleVisibility","setupPolyfillingSelect"),v(d,!1),d.setAttribute("aria-live","polite"),d.setAttribute("role","listbox"),e||d.setAttribute("aria-multiselectable","false"),"block"===a.getPropertyValue("display")?d.style.marginTop="-"+a.getPropertyValue("margin-bottom"):("rtl"===a.getPropertyValue("direction")?d.style.marginRight="-"+(n[0].width+u)+"px":d.style.marginLeft="-"+(n[0].width+s)+"px",d.style.marginTop=parseInt(n[0].height+(t.offsetTop-i.offsetTop),10)+"px"),d.style.borderRadius=a.getPropertyValue("border-radius"),d.style.minWidth=n[0].width+"px",e){var c=document.createElement("option");c.innerText=l,c.disabled=!0,c.setAttribute("class","message"),d.appendChild(c)}return i.appendChild(d),e?d.addEventListener("change",f):d.addEventListener("click",f),d.addEventListener("blur",f),d.addEventListener("keyup",f),d}},f=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var o="select"===i?t:t.parentNode,l=o.parentNode,n=l.title,r=e.type,a="keyup"===r&&13!==e.keyCode&&27!==e.keyCode;if("change"===r||"click"===r||"keyup"===r&&13===e.keyCode){var s=l.id,u=document.querySelector('input[list="'+s+'"]'),d=o.value;if(null!==u&&void 0!==d&&d.length>0&&d!==n){var c=u.value,p,g="email"===u.type&&u.multiple,y;g&&(p=c.lastIndexOf(","))>-1?u.value=c.slice(0,p)+","+d:u.value=d,"function"==typeof Event?y=new Event("input",{bubbles:!0}):(y=document.createEvent("Event"),y.initEvent("input",!0,!1)),u.dispatchEvent(y),u.focus(),a=!1}}console.log("toggleVisibility","changeDataListSelect"),v(o,a)}},v=function(e,t){console.log("toggleVisibility",t),void 0===t&&(t=e&&e.querySelector("option:not(:disabled)")),t?e.removeAttribute("hidden"):e.setAttributeNode(document.createAttribute("hidden")),e.setAttribute("aria-hidden",(!t).toString())};document.addEventListener("focus",g,!0)}();

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.14.1",
+  "version": "1.14.2",
   "description": "A lightweight and dependency-free vanilla JavaScript datalist polyfill.",
@@ -5,0 +5,0 @@ "main": "datalist-polyfill.js",

No alert changes

Improved metrics

Total package byte prevSize

54046

increased by1.82%

Lines of code

411

increased by0.74%

No dependency changes