datalist-polyfill - npm Package Compare versions

Comparing version 1.18.0 to 1.18.1

bower.json

 {
   "name": "datalist-polyfill",
   "description": "A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "homepage": "https://github.com/mfranzke/datalist-polyfill",
@@ -6,0 +6,0 @@ "authors": [{

CHANGELOG.md

@@ -9,2 +9,6 @@ # Changelog
 
+## [1.18.1] - 2018-07-10
+### Added
+- Dispatch the input event as well on the related `input[list]` on using the Backspace key within the polyfilling select
+
 ## [1.18.0] - 2018-07-10
@@ -11,0 +15,0 @@ ### Changed

datalist-polyfill.js

@@ -432,2 +432,5 @@ /*
 					);
+
+					// Dispatch the input event on the related input[list]
+					dispatchInputEvent(inputList);
 				} else {
@@ -470,3 +473,3 @@ inputList.value += event.key;
 			) {
-				var lastSeperator, evt;
+				var lastSeperator;
 
@@ -479,16 +482,8 @@ // In case of type=email and multiple attribute, we need to set up the resulting inputs value differently
 						? inputList.value.slice(0, lastSeperator) +
-						  ',' +
-						  datalistSelectValue
+							',' +
+							datalistSelectValue
 						: (inputList.value = datalistSelectValue);
 
-				// Create and dispatch the input event; divided for IE9 usage
-				if (typeof Event === 'function') {
-					evt = new Event('input', {
-						bubbles: true
-					});
-				} else {
-					evt = document.createEvent('Event');
-					evt.initEvent('input', true, false);
-				}
-				inputList.dispatchEvent(evt);
+				// Dispatch the input event on the related input[list]
+				dispatchInputEvent(inputList);
 
@@ -509,2 +504,17 @@ // Finally focusing the input, as other browser do this as well
 
+	// Create and dispatch the input event; divided for IE9 usage
+	var dispatchInputEvent = function(inputList) {
+		var evt;
+
+		if (typeof Event === 'function') {
+			evt = new Event('input', {
+				bubbles: true
+			});
+		} else {
+			evt = document.createEvent('Event');
+			evt.initEvent('input', true, false);
+		}
+		inputList.dispatchEvent(evt);
+	};
+
 	// Toggle the visibility of the datalist select
@@ -511,0 +521,0 @@ var toggleVisibility = function(visible, datalistSelect) {

datalist-polyfill.min.js

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

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "description": "A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.",
@@ -5,0 +5,0 @@ "main": "datalist-polyfill.js",

README.md

@@ -24,3 +24,3 @@ [npm]: https://npmjs.com/package/datalist-polyfill "datalist polyfill – on NPM"
 ## Features
-*	Lightweight: 5.98 kB of minified JavaScript, around 2.54 kB gzipped
+*	Lightweight: 6.01 kB of minified JavaScript, around 2.55 kB gzipped
 *	Fully flexible to change the datalist entries / `<option>`s
@@ -27,0 +27,0 @@ *	Supporting:

No alert changes

Improved metrics

Total package byte prevSize

55716

increased by0.75%

Lines of code

488

increased by1.46%

No dependency changes