datalist-polyfill - npm Package Compare versions

Comparing version 1.22.2 to 1.23.0

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.22.2",
+	"version": "1.23.0",
 	"homepage": "https://github.com/mfranzke/datalist-polyfill",
@@ -6,0 +6,0 @@ "authors": [

CHANGELOG.md

@@ -10,2 +10,15 @@ # Changelog
 
+## [1.23.0] - 2019-01-05
+
+### Added
+
+- Microsoft EDGE / datalist popups get "emptied" when receiving focus via tabbing / #GH-49
+
+### Changed
+
+- Updated webdriver.io testing framework to version 5
+- Updated some aspects within the `README` file as well as announced some upcoming bigger changes regarding and to cheer the recognized basic support of `datalist` elements within Apple Safari browser.
+- Refactoring to prevent a „Function has a complexity of 21.“
+- Some simple reformatting of the code according to prettier
+
 ## [1.22.2] - 2018-11-03
@@ -12,0 +25,0 @@

datalist-polyfill.js

 /*
-* Datalist polyfill - https://github.com/mfranzke/datalist-polyfill
-* @license Copyright(c) 2017 by Maximilian Franzke
-* Supported by Christian, Johannes, @mitchhentges, @mertenhanisch, @ailintom, @Kravimir, @mischah, @hryamzik, @ottoville, @IceCreamYou, @wlekin, @eddr, @beebee1987 and @mricherzhagen - many thanks for that !
-*/
+ * Datalist polyfill - https://github.com/mfranzke/datalist-polyfill
+ * @license Copyright(c) 2017 by Maximilian Franzke
+ * Supported by Christian, Johannes, @mitchhentges, @mertenhanisch, @ailintom, @Kravimir, @mischah, @hryamzik, @ottoville, @IceCreamYou, @wlekin, @eddr, @beebee1987 and @mricherzhagen - many thanks for that !
+ */
 /*
-* A minimal and dependency-free vanilla JavaScript datalist polyfill.
-* Supports all standard's functionality as well as mimics other browsers behavior.
-* Tests for native support of an inputs elements datalist functionality.
-* Elsewhere the functionality gets emulated by a select element.
-*/
+ * A minimal and dependency-free vanilla JavaScript datalist polyfill.
+ * Supports all standard's functionality as well as mimics other browsers behavior.
+ * Tests for native support of an inputs elements datalist functionality.
+ * Elsewhere the functionality gets emulated by a select element.
+ */
 
@@ -26,8 +26,7 @@ (function() {
 		// adapted out of https://gist.github.com/gaboratorium/25f08b76eb82b1e7b91b01a0448f8b1d :
-		isGteIE11orEDGE = Boolean(
-			ua.indexOf('Trident/') !== -1 || ua.indexOf('Edge/') !== -1
-		);
+		isGteIE11 = Boolean(ua.indexOf('Trident/') !== -1),
+		isEDGE = Boolean(ua.indexOf('Edge/') !== -1);
 
 	// Let's break here, if it's even already supported ... and not IE11+ or EDGE
-	if (datalistSupported && !isGteIE11orEDGE) {
+	if (datalistSupported && !isGteIE11 && !isEDGE) {
 		return false;
@@ -116,3 +115,3 @@ }
 		// Handling IE11+ & EDGE
-		if (isGteIE11orEDGE) {
+		if (isGteIE11 || isEDGE) {
 			// On keypress check for value
@@ -258,36 +257,15 @@ if (
 		if (!input.matches('.' + classNameInput)) {
-			// We'd like to prevent autocomplete on the input datalist field
-			input.setAttribute('autocomplete', 'off');
+			prepareInput(input, event.type);
+		}
 
-			// WAI ARIA attributes
-			input.setAttribute('role', 'textbox');
-			input.setAttribute('aria-haspopup', 'true');
-			input.setAttribute('aria-autocomplete', 'list');
-			input.setAttribute('aria-owns', input.getAttribute('list'));
+		// #GH-49: Microsoft EDGE / datalist popups get "emptied" when receiving focus via tabbing
+		if (isEDGE && event.type === 'focusin') {
+			// Set the value of the first option to it's value - this actually triggers a redraw of the complete list
+			var firstOption = input.list.options[0];
 
-			// Bind the keyup event on the related datalists input
-			if (event.type === 'focusin') {
-				input.addEventListener('keyup', inputInputList);
-
-				input.addEventListener('focusout', changesInputList, true);
-
-				if (isGteIE11orEDGE) {
-					input.addEventListener('input', inputInputListIE);
-				}
-			} else if (event.type === 'blur') {
-				input.removeEventListener('keyup', inputInputList);
-
-				input.removeEventListener('focusout', changesInputList, true);
-
-				if (isGteIE11orEDGE) {
-					input.removeEventListener('input', inputInputListIE);
-				}
-			}
-
-			// Add class for identifying that this input is even already being polyfilled
-			input.className += ' ' + classNameInput;
+			firstOption.value = firstOption.value;
 		}
 
 		// Break here for IE11+ & EDGE
-		if (isGteIE11orEDGE) {
+		if (isGteIE11 || isEDGE) {
 			return;
@@ -311,2 +289,36 @@ }
 
+	// Prepare the input
+	var prepareInput = function(input, eventType) {
+		// We'd like to prevent autocomplete on the input datalist field
+		input.setAttribute('autocomplete', 'off');
+
+		// WAI ARIA attributes
+		input.setAttribute('role', 'textbox');
+		input.setAttribute('aria-haspopup', 'true');
+		input.setAttribute('aria-autocomplete', 'list');
+		input.setAttribute('aria-owns', input.getAttribute('list'));
+
+		// Bind the keyup event on the related datalists input
+		if (eventType === 'focusin') {
+			input.addEventListener('keyup', inputInputList);
+
+			input.addEventListener('focusout', changesInputList, true);
+
+			if (isGteIE11 || isEDGE) {
+				input.addEventListener('input', inputInputListIE);
+			}
+		} else if (eventType === 'blur') {
+			input.removeEventListener('keyup', inputInputList);
+
+			input.removeEventListener('focusout', changesInputList, true);
+
+			if (isGteIE11 || isEDGE) {
+				input.removeEventListener('input', inputInputListIE);
+			}
+		}
+
+		// Add class for identifying that this input is even already being polyfilled
+		input.className += ' ' + classNameInput;
+	};
+
 	// Binding the focus event - matching the input[list]s happens in the function afterwards
@@ -316,3 +328,3 @@ dcmnt.addEventListener('focusin', changesInputList, true);
 	// Break here for IE11+ & EDGE
-	if (isGteIE11orEDGE) {
+	if (isGteIE11 || isEDGE) {
 		return;
@@ -319,0 +331,0 @@ }

datalist-polyfill.min.js

 /*
-* Datalist polyfill - https://github.com/mfranzke/datalist-polyfill
-* @license Copyright(c) 2017 by Maximilian Franzke
-* Supported by Christian, Johannes, @mitchhentges, @mertenhanisch, @ailintom, @Kravimir, @mischah, @hryamzik, @ottoville, @IceCreamYou, @wlekin, @eddr, @beebee1987 and @mricherzhagen - many thanks for that !
-*/
+ * Datalist polyfill - https://github.com/mfranzke/datalist-polyfill
+ * @license Copyright(c) 2017 by Maximilian Franzke
+ * Supported by Christian, Johannes, @mitchhentges, @mertenhanisch, @ailintom, @Kravimir, @mischah, @hryamzik, @ottoville, @IceCreamYou, @wlekin, @eddr, @beebee1987 and @mricherzhagen - many thanks for that !
+ */
 /*
-* A minimal and dependency-free vanilla JavaScript datalist polyfill.
-* Supports all standard's functionality as well as mimics other browsers behavior.
-* Tests for native support of an inputs elements datalist functionality.
-* Elsewhere the functionality gets emulated by a select element.
-*/
+ * A minimal and dependency-free vanilla JavaScript datalist polyfill.
+ * Supports all standard's functionality as well as mimics other browsers behavior.
+ * Tests for native support of an inputs elements datalist functionality.
+ * Elsewhere the functionality gets emulated by a select element.
+ */
 !function(){"use strict";
@@ -20,5 +20,5 @@ // Performance: Set local variables
 // adapted out of https://gist.github.com/gaboratorium/25f08b76eb82b1e7b91b01a0448f8b1d :
-s=Boolean(-1!==e.indexOf("Trident/")||-1!==e.indexOf("Edge/"));
+s=Boolean(-1!==e.indexOf("Trident/")),d=Boolean(-1!==e.indexOf("Edge/"));
 // Let's break here, if it's even already supported ... and not IE11+ or EDGE
-if(t&&!s)return;
+if(t&&!s&&!d)return;
 // .matches polyfill
@@ -28,5 +28,5 @@ // TODO: probably needs enhancement on the expected to be supported browsers
 // Define some global settings and configurations
-var d=!1,
+var p=!1,
 // Speaking variables for the different keycodes
-p=13,c=27,v=38,y=40,
+c=13,v=27,y=38,f=40,
 // Defining the text / value seperator for displaying the value and text values ...
@@ -37,11 +37,11 @@ g=" / ",
 // Classes for elements
-r="polyfilled",f="polyfilling",
+o="polyfilled",m="polyfilling",
 // Defining a most likely unique polyfill string
 i="###[P0LYFlLLed]###";
 // Differentiate for touch interactions, adapted by https://medium.com/@david.gilbertson/the-only-way-to-detect-touch-with-javascript-7791a3346685
-window.addEventListener("touchstart",function e(){d=!0,window.removeEventListener("touchstart",e)});
+window.addEventListener("touchstart",function e(){p=!0,window.removeEventListener("touchstart",e)});
 // For observing any changes to the option elements within the datalist elements, define MutationObserver initially
-var a=window.MutationObserver||window.WebKitMutationObserver,m;
+var a=window.MutationObserver||window.WebKitMutationObserver,r;
 // Define a new observer
-void 0!==a&&(m=new a(function(e){var a=!1;
+void 0!==a&&(r=new a(function(e){var a=!1;
 // Look through all mutations that just occured
@@ -52,25 +52,25 @@ if(e.forEach(function(e){
 // Prepare the options and toggle the visiblity afterwards
-T(C(a,t).length,a.getElementsByClassName(f)[0])}}));
+N(L(a,t).length,a.getElementsByClassName(m)[0])}}));
 // Function regarding the inputs interactions on keyup event
-var o=function(e){var t=e.target,a=t.list,i=e.keyCode===v||e.keyCode===y;
+var n=function(e){var t=e.target,a=t.list,i=e.keyCode===y||e.keyCode===f;
 // Check for whether the events target was an input and still check for an existing instance of the datalist and polyfilling select
 if("input"===t.tagName.toLowerCase()&&null!==a)
 // Handling IE11+ & EDGE
-if(s)
+if(s||d)
 // On keypress check for value
-""===t.value||i||e.keyCode===p||e.keyCode===c||(b(t,a),
+""===t.value||i||e.keyCode===c||e.keyCode===v||(b(t,a),
 // TODO: Check whether this update is necessary depending on the options values
 t.focus());else{var n=!1,
 // Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
-r=a.getElementsByClassName(f)[0]||L(t,a);
+r=a.getElementsByClassName(m)[0]||A(t,a);
 // On an ESC or ENTER key press within the input, let's break here and afterwards hide the datalist select, but if the input contains a value or one of the opening keys have been pressed ...
-if(e.keyCode!==c&&e.keyCode!==p&&(""!==t.value||i)&&void 0!==r){
+if(e.keyCode!==v&&e.keyCode!==c&&(""!==t.value||i)&&void 0!==r){
 // ... prepare the options
-0<C(a,t).length&&(n=!0);var o=0,l=r.options.length-1;
+0<L(a,t).length&&(n=!0);var o=0,l=r.options.length-1;
 // ... preselect best fitting index
-d?r.selectedIndex=0:i&&"number"!==t.getAttribute("type")&&(r.selectedIndex=e.keyCode===v?l:0,
+p?r.selectedIndex=0:i&&"number"!==t.getAttribute("type")&&(r.selectedIndex=e.keyCode===y?l:0,
 // ... and on arrow up or down keys, focus the select
 r.focus())}
 // Toggle the visibility of the datalist select according to previous checks
-T(n,r)}},b=function(a,e){
+N(n,r)}},b=function(a,e){
 // Loop through the options
@@ -88,3 +88,3 @@ Array.prototype.slice.call(e.options,0).forEach(function(e){var t=e.dataset.originalvalue||e.value;
 			As the value is being inserted on users selection, we'll replace that one within the upfollowing inputInputListIE function
-			*/,e.value=w(e,a.value)?a.value+i+t.toLowerCase():t})},h=function(e){var t=e.target,a=t.list;if(t.matches("input[list]")&&t.matches("."+r)&&a){
+			*/,e.value=w(e,a.value)?a.value+i+t.toLowerCase():t})},h=function(e){var t=e.target,a=t.list;if(t.matches("input[list]")&&t.matches("."+o)&&a){
 // Query for related option - and escaping the value as doublequotes wouldn't work
@@ -99,20 +99,24 @@ var i=a.querySelector('option[value="'+t.value.replace(/\\([\s\S])|(")/g,"\\$1$2")+'"]');i&&i.dataset.originalvalue&&(t.value=i.dataset.originalvalue)}},w=function(e,t){var a=e.value.toLowerCase(),i=t.toLowerCase(),n=e.getAttribute("label"),r=e.text.toLowerCase();
 // Check for whether the events target was an input and still check for an existing instance of the datalist
-if("input"===t.tagName.toLowerCase()&&null!==a&&(
+if("input"===t.tagName.toLowerCase()&&null!==a){
+// #GH-49: Microsoft EDGE / datalist popups get "emptied" when receiving focus via tabbing
+if(
 // Test for whether this input has already been enhanced by the polyfill
-t.matches("."+r)||(
+t.matches("."+o)||C(t,e.type),d&&"focusin"===e.type){
+// Set the value of the first option to it's value - this actually triggers a redraw of the complete list
+var i=t.list.options[0];i.value=i.value}
+// Break here for IE11+ & EDGE
+if(!s&&!d){var// Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
+n=a.getElementsByClassName(m)[0]||A(t,a),
+// Either have the select set to the state to get displayed in case of that it would have been focused or because it's the target on the inputs blur - and check for general existance of any option as suggestions
+r=n&&n.querySelector("option:not(:disabled)")&&("focusin"===e.type&&""!==t.value||e.relatedTarget&&e.relatedTarget===n);
+// Toggle the visibility of the datalist select according to previous checks
+N(r,n)}}}},C=function(e,t){
 // We'd like to prevent autocomplete on the input datalist field
-t.setAttribute("autocomplete","off"),
+e.setAttribute("autocomplete","off"),
 // WAI ARIA attributes
-t.setAttribute("role","textbox"),t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-owns",t.getAttribute("list")),
+e.setAttribute("role","textbox"),e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-owns",e.getAttribute("list")),
 // Bind the keyup event on the related datalists input
-"focusin"===e.type?(t.addEventListener("keyup",o),t.addEventListener("focusout",E,!0),s&&t.addEventListener("input",h)):"blur"===e.type&&(t.removeEventListener("keyup",o),t.removeEventListener("focusout",E,!0),s&&t.removeEventListener("input",h)),
+"focusin"===t?(e.addEventListener("keyup",n),e.addEventListener("focusout",E,!0),(s||d)&&e.addEventListener("input",h)):"blur"===t&&(e.removeEventListener("keyup",n),e.removeEventListener("focusout",E,!0),(s||d)&&e.removeEventListener("input",h)),
 // Add class for identifying that this input is even already being polyfilled
-t.className+=" "+r),!s))
-// Break here for IE11+ & EDGE
-{var// Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
-i=a.getElementsByClassName(f)[0]||L(t,a),
-// Either have the select set to the state to get displayed in case of that it would have been focused or because it's the target on the inputs blur - and check for general existance of any option as suggestions
-n=i&&i.querySelector("option:not(:disabled)")&&("focusin"===e.type&&""!==t.value||e.relatedTarget&&e.relatedTarget===i);
-// Toggle the visibility of the datalist select according to previous checks
-T(n,i)}}};
+e.className+=" "+o};
 // On keypress check all options for that as a substring, save the original value as a data-attribute and preset that inputs value (for sorting) for all option values (probably as well enhanced by a token)
@@ -122,6 +126,6 @@ // Break here for IE11+ & EDGE
 // Binding the focus event - matching the input[list]s happens in the function afterwards
-u.addEventListener("focusin",E,!0),!s){
+u.addEventListener("focusin",E,!0),!s&&!d){
 // Function for preparing and sorting the options/suggestions
-var C=function(e,n){void 0!==m&&m.disconnect();var// Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
-t=e.getElementsByClassName(f)[0]||L(n,e),o=n.value,l=u.createDocumentFragment(),s=u.createDocumentFragment();
+var L=function(e,n){void 0!==r&&r.disconnect();var// Creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted)
+t=e.getElementsByClassName(m)[0]||A(n,e),o=n.value,l=u.createDocumentFragment(),s=u.createDocumentFragment();
 // In case of type=email and multiple attribute, we would need to grab the last piece
@@ -144,5 +148,5 @@ // Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
 // Input the options fragment into the datalists select
-t.appendChild(l);var a=t.options.length;return t.size=10<a?10:a,t.multiple=!d&&a<2,
+t.appendChild(l);var a=t.options.length;return t.size=10<a?10:a,t.multiple=!p&&a<2,
 // Input the unused options as siblings next to the select - and differentiate in between the regular, and the IE9 fix syntax upfront
-(e.getElementsByClassName("ie9_fix")[0]||e).appendChild(s),void 0!==m&&m.observe(e,{childList:!0}),t.options},L=function(e,t){
+(e.getElementsByClassName("ie9_fix")[0]||e).appendChild(s),void 0!==r&&r.observe(e,{childList:!0}),t.options},A=function(e,t){
 // Check for whether it's of one of the supported input types defined at the beginning
@@ -156,13 +160,13 @@ // Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
 // The select should get positioned underneath the input field ...
-if(n.setAttribute("class",f),
+if(n.setAttribute("class",m),
 // Set general styling related definitions
 n.style.position="absolute",
 // Initially hiding the datalist select
-T(!1,n),
+N(!1,n),
 // The select itself shouldn't be a possible target for tabbing
 n.setAttribute("tabindex","-1"),
 // WAI ARIA attributes
-n.setAttribute("aria-live","polite"),n.setAttribute("role","listbox"),d||n.setAttribute("aria-multiselectable","false"),"block"===i.getPropertyValue("display"))n.style.marginTop="-"+i.getPropertyValue("margin-bottom");else{var r="rtl"===i.getPropertyValue("direction")?"right":"left";n.style.setProperty("margin-"+r,"-"+(a[0].width+parseFloat(i.getPropertyValue("margin-"+r)))+"px"),n.style.marginTop=parseInt(a[0].height+(e.offsetTop-t.offsetTop),10)+"px"}
+n.setAttribute("aria-live","polite"),n.setAttribute("role","listbox"),p||n.setAttribute("aria-multiselectable","false"),"block"===i.getPropertyValue("display"))n.style.marginTop="-"+i.getPropertyValue("margin-bottom");else{var r="rtl"===i.getPropertyValue("direction")?"right":"left";n.style.setProperty("margin-"+r,"-"+(a[0].width+parseFloat(i.getPropertyValue("margin-"+r)))+"px"),n.style.marginTop=parseInt(a[0].height+(e.offsetTop-t.offsetTop),10)+"px"}
 // Set the polyfilling selects border-radius equally to the one by the polyfilled input
-if(n.style.borderRadius=i.getPropertyValue("border-radius"),n.style.minWidth=a[0].width+"px",d){var o=u.createElement("option");
+if(n.style.borderRadius=i.getPropertyValue("border-radius"),n.style.minWidth=a[0].width+"px",p){var o=u.createElement("option");
 // ... and it's first entry should contain the localized message to select an entry
@@ -179,3 +183,3 @@ o.innerText=t.title,
 // ... and our upfollowing functions to the related event
-d?n.addEventListener("change",k):n.addEventListener("click",k),n.addEventListener("blur",k),n.addEventListener("keydown",k),n.addEventListener("keypress",A),n}},A=function(e){var t=e.target,a=t.parentNode,i=u.querySelector('input[list="'+a.id+'"]');
+p?n.addEventListener("change",x):n.addEventListener("click",x),n.addEventListener("blur",x),n.addEventListener("keydown",x),n.addEventListener("keypress",k),n}},k=function(e){var t=e.target,a=t.parentNode,i=u.querySelector('input[list="'+a.id+'"]');
 // Check for whether the events target was a select or whether the input doesn't exist
@@ -186,9 +190,9 @@ "select"===t.tagName.toLowerCase()&&null!==i&&(
 // Dispatch the input event on the related input[list]
-x(i)):i.value+=e.key,C(a,i)))},k=function(e){var t=e.currentTarget,a=t.parentNode,i=u.querySelector('input[list="'+a.id+'"]');
+T(i)):i.value+=e.key,L(a,i)))},x=function(e){var t=e.currentTarget,a=t.parentNode,i=u.querySelector('input[list="'+a.id+'"]');
 // Check for whether the events target was a select or whether the input doesn't exist
 if("select"===t.tagName.toLowerCase()&&null!==i){var n=e.type,
 // ENTER and ESC
-r="keydown"===n&&e.keyCode!==p&&e.keyCode!==c,o;
+r="keydown"===n&&e.keyCode!==c&&e.keyCode!==v,o;
 // On change, click or after pressing ENTER or TAB key, input the selects value into the input on a change within the list
-if(("change"===n||"click"===n||"keydown"===n&&(e.keyCode===p||"Tab"===e.key))&&0<t.value.length&&t.value!==a.title)
+if(("change"===n||"click"===n||"keydown"===n&&(e.keyCode===c||"Tab"===e.key))&&0<t.value.length&&t.value!==a.title)
 // In case of type=email and multiple attribute, we need to set up the resulting inputs value differently
@@ -199,11 +203,11 @@ i.value=
 // Dispatch the input event on the related input[list]
-x(i),
+T(i),
 // Finally focusing the input, as other browser do this as well
 "Tab"!==e.key&&i.focus(),
 // Set the visibility to false afterwards, as we're done here
-r=!1;else"keydown"===n&&e.keyCode===c&&
+r=!1;else"keydown"===n&&e.keyCode===v&&
 // In case of the ESC key being pressed, we still want to focus the input[list]
 i.focus();
 // Toggle the visibility of the datalist select according to previous checks
-T(r,t)}},x=function(e){var t;"function"==typeof Event?t=new Event("input",{bubbles:!0}):(t=u.createEvent("Event")).initEvent("input",!0,!1),e.dispatchEvent(t)},T=function(e,t){e?t.removeAttribute("hidden"):t.setAttributeNode(u.createAttribute("hidden")),t.setAttribute("aria-hidden",(!e).toString())},n,N;
+N(r,t)}},T=function(e){var t;"function"==typeof Event?t=new Event("input",{bubbles:!0}):(t=u.createEvent("Event")).initEvent("input",!0,!1),e.dispatchEvent(t)},N=function(e,t){e?t.removeAttribute("hidden"):t.setAttributeNode(u.createAttribute("hidden")),t.setAttribute("aria-hidden",(!e).toString())},B,O;
 // Define function for setting up the polyfilling select
@@ -213,3 +217,3 @@ (
 // list property / https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement
-n=window.HTMLInputElement)&&n.prototype&&void 0===n.prototype.list&&Object.defineProperty(n.prototype,"list",{get:function(){
+B=window.HTMLInputElement)&&B.prototype&&void 0===B.prototype.list&&Object.defineProperty(B.prototype,"list",{get:function(){
 /*
@@ -220,4 +224,4 @@ According to the specs ...
 					*/
-var e=u.getElementById(this.getAttribute("list"));return"object"==typeof this&&this instanceof n&&e&&e.matches("datalist")?e:null}}),(
+var e=u.getElementById(this.getAttribute("list"));return"object"==typeof this&&this instanceof B&&e&&e.matches("datalist")?e:null}}),(
 // Options property / https://developer.mozilla.org/en/docs/Web/API/HTMLDataListElement
-N=window.HTMLElement)&&N.prototype&&void 0===N.prototype.options&&Object.defineProperty(N.prototype,"options",{get:function(){return"object"==typeof this&&this instanceof N?this.getElementsByTagName("option"):null}})}}();
+O=window.HTMLElement)&&O.prototype&&void 0===O.prototype.options&&Object.defineProperty(O.prototype,"options",{get:function(){return"object"==typeof this&&this instanceof O?this.getElementsByTagName("option"):null}})}}();

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.22.2",
+  "version": "1.23.0",
   "description": "A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.",
@@ -34,9 +34,7 @@ "main": "datalist-polyfill.js",
     "chai": "^4.1.2",
-    "husky": "^1.1.3",
     "mocha": "^5.2.0",
     "prettier": "^1.13.6",
-    "pretty-quick": "^1.8.0",
     "wdio-mocha-framework": "^0.6.2",
-    "webdriverio": "^4.13.1",
-    "xo": "^0.22.0"
+    "webdriverio": "^5.0.0",
+    "xo": "^0.23.0"
   },
@@ -53,8 +51,3 @@ "xo": {
     }
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
   }
 }

README.md

@@ -15,2 +15,5 @@ [npm]: https://npmjs.com/package/datalist-polyfill 'datalist polyfill – on NPM'
 
+**Update:** Safari TP seems to support the `datalist` element at least basically. Yeah !!! Exciting news!
+I'm planning to release a new major version soon to both cheer as well as accommodate their implementation.
+
 This is a minimal and dependency-free vanilla JavaScript polyfill for the awesome datalist-functionality, that will bring joy and happiness into our lives :-)
@@ -40,3 +43,3 @@
 - Emits "input" event when item in the `datalist` is selected
-- Enables core keyboard controls such as the
+- Enables core keyboard controls such as
   - on the `input`
@@ -156,5 +159,6 @@ - up and down arrow keys
     <th>Problem</th>
+    <th>IE9</th>
     <th>iOS</th>
     <th>Safari</th>
-    <th>IE9</th>
+    <th>Safari TP</th>
     <th>IE11+</th>
@@ -169,3 +173,3 @@ <th>EDGE</th>
     <td colspan="3" align="center">✔ <i>Polyfill</i></td>
-    <td colspan="4" align="center">✔</td>
+    <td colspan="5" align="center">✔</td>
     <td align="center"><a href="https://github.com/mfranzke/datalist-polyfill/issues/33">#GH-33</a></td>
@@ -175,12 +179,18 @@ </tr>
     <th align="left"><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=773041">long lists of items are unscrollable resulting in unselectable options</a></th>
-    <td colspan="6">&nbsp;</td>
-    <td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=773041" target="_blank">fixed with v.69</a></td>
-    <td>&nbsp;</td>
+    <td colspan="7" align="center">✔</td>
+    <td align="center"><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=773041" target="_blank">fixed with v.69</a></td>
+    <td align="center">✔</td>
   </tr>
   <tr>
     <th align="left"><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9573654/">No substring matching for the suggestions</a></th>
-    <td colspan="3">✔</td>
+    <td colspan="4" align="center">✔</td>
     <td colspan="2" align="center">✔ by <a href="https://github.com/mfranzke/datalist-polyfill/issues/39">#GH-39</a></td>
-    <td colspan="3">✔</td>
+    <td colspan="3" align="center">✔</td>
   </tr>
+  <tr>
+    <th align="left"><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/20066595/">`datalist` popups gets &quot;emptied&quot; when receiving focus via tab</a></th>
+    <td colspan="5" align="center">✔</td>
+    <td align="center"><a href="https://github.com/mfranzke/datalist-polyfill/issues/49">#GH-49</a></td>
+    <td colspan="3" align="center">✔</td>
+  </tr>
 </table>
@@ -187,0 +197,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

147173

increased by1.3%

Dev dependency count

6

decreased by-25%

Lines of code

2290

increased by0.57%

Number of lines in readme file

200

increased by5.26%

No dependency changes