datalist-polyfill - npm Package Compare versions

Comparing version 1.23.2 to 1.23.3

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

CHANGELOG.md

@@ -10,2 +10,19 @@ # Changelog
 
+### Changed
+
+- 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.
+
+## [1.23.3] - 2019-01-28
+
+### Changed
+
+- update xo to version 0.24.0
+
+### Fixed
+
+- No substring matching for multiple emailadress suggestions in IE10+ and EDGE / #GH-54
+- EDGE: Incorrect handling of non-text input fields / #GH-55
+- IE10: Changes by #39 break script execution due to usage of .dataset / #GH-56
+- Some simple corrections, like e.g. removing incorrectly set `multiple` attributes
+
 ## [1.23.2] - 2019-01-08
@@ -12,0 +29,0 @@

datalist-polyfill.js

@@ -89,3 +89,3 @@ /*
 
-				if (input.value !== '') {
+				if (getInputValue(input) !== '') {
 					// Prepare the options and toggle the visiblity afterwards
@@ -118,6 +118,8 @@ toggleVisibility(
 			if (
-				input.value !== '' &&
+				getInputValue(input) !== '' &&
 				!keyOpen &&
 				event.keyCode !== keyENTER &&
-				event.keyCode !== keyESC
+				event.keyCode !== keyESC &&
+				// As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here
+				(isGteIE10 || input.type === 'text')
 			) {
@@ -142,3 +144,3 @@ updateIEOptions(input, datalist);
 			event.keyCode !== keyENTER &&
-			(input.value !== '' || keyOpen) &&
+			(getInputValue(input) !== '' || keyOpen) &&
 			datalistSelect !== undefined
@@ -172,9 +174,14 @@ ) {
 	var updateIEOptions = function(input, datalist) {
+		var inputValue = getInputValue(input);
+
 		// Loop through the options
 		Array.prototype.slice.call(datalist.options, 0).forEach(function(option) {
-			var originalValue = option.dataset.originalvalue || option.value;
+			// We're using .getAttribute instead of .dataset here for IE10
+			var dataOriginalvalue = option.getAttribute('data-originalvalue'),
+				originalValue = dataOriginalvalue || option.value;
 
 			// In case of that the original value hasn't been saved as data so far, do that now
-			if (!option.dataset.originalvalue) {
-				option.dataset.originalvalue = originalValue;
+			if (!dataOriginalvalue) {
+				// We're using .setAttribute instead of .dataset here for IE10
+				option.setAttribute('data-originalvalue', originalValue);
 			}
@@ -194,4 +201,4 @@
 			*/
-			option.value = isValidSuggestion(option, input.value)
-				? input.value + uniquePolyfillString + originalValue.toLowerCase()
+			option.value = isValidSuggestion(option, inputValue)
+				? inputValue + uniquePolyfillString + originalValue.toLowerCase()
 				: originalValue;
@@ -216,7 +223,8 @@ });
 		var option = datalist.querySelector(
-			'option[value="' + input.value.replace(/\\([\s\S])|(")/g, '\\$1$2') + '"]'
+			'option[value="' + getInputValue(input).replace(/\\([\s\S])|(")/g, '\\$1$2') + '"]'
 		);
 
-		if (option && option.dataset.originalvalue) {
-			input.value = option.dataset.originalvalue;
+		// We're using .getAttribute instead of .dataset here for IE10
+		if (option && option.getAttribute('data-originalvalue')) {
+			setInputValue(input, option.getAttribute('data-originalvalue'));
 		}
@@ -285,3 +293,3 @@ };
 				datalistSelect.querySelector('option:not(:disabled)') &&
-				((event.type === 'focusin' && input.value !== '') ||
+				((event.type === 'focusin' && getInputValue(input) !== '') ||
 					(event.relatedTarget && event.relatedTarget === datalistSelect));
@@ -310,3 +318,4 @@
 
-			if (isGteIE10 || isEDGE) {
+			// As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here
+			if (isGteIE10 || (isEDGE && input.type === 'text')) {
 				input.addEventListener('input', inputInputListIE);
@@ -319,3 +328,4 @@ }
 
-			if (isGteIE10 || isEDGE) {
+			// As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here
+			if (isGteIE10 || (isEDGE && input.type === 'text')) {
 				input.removeEventListener('input', inputInputListIE);
@@ -329,2 +339,26 @@ }
 
+	// Get the input value for dividing regular and mail types
+	var getInputValue = function(input) {
+		// In case of type=email and multiple attribute, we would need to grab the last piece
+		// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
+		return (
+			input.getAttribute('type') === 'email' &&
+			input.getAttribute('multiple') !== null
+		) ? input.value.substring(input.value.lastIndexOf(',') + 1) : input.value;
+	};
+
+	// Set the input value for dividing regular and mail types
+	var setInputValue = function(input, datalistSelectValue) {
+		var lastSeperator;
+
+		// In case of type=email and multiple attribute, we need to set up the resulting inputs value differently
+		input.value =
+			// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
+			input.getAttribute('type') === 'email' &&
+			input.getAttribute('multiple') !== null &&
+			(lastSeperator = input.value.lastIndexOf(',')) > -1
+				? input.value.slice(0, lastSeperator) + ',' + datalistSelectValue
+				: datalistSelectValue;
+	};
+
 	// Binding the focus event - matching the input[list]s happens in the function afterwards
@@ -348,15 +382,6 @@ dcmnt.addEventListener('focusin', changesInputList, true);
 				setUpPolyfillingSelect(input, datalist),
-			inputValue = input.value,
+			inputValue = getInputValue(input),
 			newSelectValues = dcmnt.createDocumentFragment(),
 			disabledValues = dcmnt.createDocumentFragment();
 
-		// In case of type=email and multiple attribute, we would need to grab the last piece
-		// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
-		if (
-			input.getAttribute('type') === 'email' &&
-			input.getAttribute('multiple') !== null
-		) {
-			inputValue = inputValue.substring(inputValue.lastIndexOf(',') + 1);
-		}
-
 		// Create an array out of the options list
@@ -581,13 +606,4 @@ Array.prototype.slice
 		) {
-			var lastSeperator;
+			setInputValue(input, datalistSelect.value);
 
-			// In case of type=email and multiple attribute, we need to set up the resulting inputs value differently
-			input.value =
-				// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
-				input.getAttribute('type') === 'email' &&
-				input.getAttribute('multiple') !== null &&
-				(lastSeperator = input.value.lastIndexOf(',')) > -1
-					? input.value.slice(0, lastSeperator) + ',' + datalistSelect.value
-					: (input.value = datalistSelect.value);
-
 			// Dispatch the input event on the related input[list]
@@ -594,0 +610,0 @@ dispatchInputEvent(input);

datalist-polyfill.min.js

@@ -37,43 +37,49 @@ /*
 // Defining a most likely unique polyfill string
-i="###[P0LYFlLLed]###";
+n="###[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(){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,r;
+var i=window.MutationObserver||window.WebKitMutationObserver,a;
 // Define a new observer
-void 0!==a&&(r=new a(function(e){var a=!1;
+void 0!==i&&(a=new i(function(e){var i=!1;
 // Look through all mutations that just occured
 if(e.forEach(function(e){
 // Look through all added nodes of this mutation
-for(var t=0;t<e.addedNodes.length;++t)"datalist"===e.target.tagName.toLowerCase()&&(a=e.target)}),a){var t=u.querySelector('input[list="'+a.id+'"]');""!==t.value&&
+for(var t=0;t<e.addedNodes.length;++t)"datalist"===e.target.tagName.toLowerCase()&&(i=e.target)}),i){var t=u.querySelector('input[list="'+i.id+'"]');""!==A(t)&&
 // Prepare the options and toggle the visiblity afterwards
-N(L(a,t).length,a.getElementsByClassName(m)[0])}}));
+O(k(i,t).length,i.getElementsByClassName(m)[0])}}));
 // Function regarding the inputs interactions on keyup event
-var n=function(e){var t=e.target,a=t.list,i=e.keyCode===y||e.keyCode===f;
+var r=function(e){var t=e.target,i=t.list,a=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)
+if("input"===t.tagName.toLowerCase()&&null!==i)
 // Handling IE10+ & EDGE
 if(s||d)
 // On keypress check for value
-""===t.value||i||e.keyCode===c||e.keyCode===v||(b(t,a),
+""===A(t)||a||e.keyCode===c||e.keyCode===v||
+// As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here
+!s&&"text"!==t.type||(b(t,i),
 // 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(m)[0]||k(t,a);
+r=i.getElementsByClassName(m)[0]||x(t,i);
 // 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!==v&&e.keyCode!==c&&(""!==t.value||i)&&void 0!==r){
+if(e.keyCode!==v&&e.keyCode!==c&&(""!==A(t)||a)&&void 0!==r){
 // ... prepare the options
-0<L(a,t).length&&(n=!0);var o=0,l=r.options.length-1;
+0<k(i,t).length&&(n=!0);var o=0,l=r.options.length-1;
 // ... preselect best fitting index
-p?r.selectedIndex=0:i&&"number"!==t.getAttribute("type")&&(r.selectedIndex=e.keyCode===y?l:0,
+p?r.selectedIndex=0:a&&"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
-N(n,r)}},b=function(a,e){
+O(n,r)}},b=function(e,t){var a=A(e);
 // Loop through the options
-Array.prototype.slice.call(e.options,0).forEach(function(e){var t=e.dataset.originalvalue||e.value;
+Array.prototype.slice.call(t.options,0).forEach(function(e){
+// We're using .getAttribute instead of .dataset here for IE10
+var t=e.getAttribute("data-originalvalue"),i=t||e.value;
 // In case of that the original value hasn't been saved as data so far, do that now
-e.dataset.originalvalue||(e.dataset.originalvalue=t),
+t||
+// We're using .setAttribute instead of .dataset here for IE10
+e.setAttribute("data-originalvalue",i),
 // As we'd manipulate the value in the next step, we'd like to put in that value as either a label or text if none of those exist
-e.label||e.text||(e.label=t)
+e.label||e.text||(e.label=i)
 /*
@@ -85,13 +91,15 @@ Check for whether the current option is a valid suggestion and replace its value by
 			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("."+o)&&a){
+			*/,e.value=w(e,a)?a+n+i.toLowerCase():i})},h=function(e){var t=e.target,i=t.list;if(t.matches("input[list]")&&t.matches("."+o)&&i){
 // Query for related option - and escaping the value as doublequotes wouldn't work
-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();
+var a=i.querySelector('option[value="'+A(t).replace(/\\([\s\S])|(")/g,"\\$1$2")+'"]');
+// We're using .getAttribute instead of .dataset here for IE10
+a&&a.getAttribute("data-originalvalue")&&L(t,a.getAttribute("data-originalvalue"))}},w=function(e,t){var i=e.value.toLowerCase(),a=t.toLowerCase(),n=e.getAttribute("label"),r=e.text.toLowerCase();
 /*
 		"Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a value and a label."
 		"If appropriate, the user agent should use the suggestion's label and value to identify the suggestion to the user."
-		*/return Boolean(!1===e.disabled&&(""!==a&&-1!==a.indexOf(i)||n&&-1!==n.toLowerCase().indexOf(i)||""!==r&&-1!==r.indexOf(i)))},E=function(e){
+		*/return Boolean(!1===e.disabled&&(""!==i&&-1!==i.indexOf(a)||n&&-1!==n.toLowerCase().indexOf(a)||""!==r&&-1!==r.indexOf(a)))},E=function(e){
 // Check for correct element on this event delegation
-if(e.target.matches("input[list]")){var t=e.target,a=t.list;
+if(e.target.matches("input[list]")){var t=e.target,i=t.list;
 // 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!==i){
 // #GH-49: Microsoft EDGE / datalist popups get "emptied" when receiving focus via tabbing
@@ -102,10 +110,10 @@ if(
 // 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}
+var a=t.list.options[0];a.value=a.value}
 // Break here for IE10+ & 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]||k(t,a),
+n=i.getElementsByClassName(m)[0]||x(t,i),
 // 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);
+r=n&&n.querySelector("option:not(:disabled)")&&("focusin"===e.type&&""!==A(t)||e.relatedTarget&&e.relatedTarget===n);
 // Toggle the visibility of the datalist select according to previous checks
-N(r,n)}}}},C=function(e,t){
+O(r,n)}}}},C=function(e,t){
 // We'd like to prevent autocomplete on the input datalist field
@@ -116,5 +124,16 @@ e.setAttribute("autocomplete","off"),
 // Bind the keyup event on the related datalists input
-"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)),
+"focusin"===t?(e.addEventListener("keyup",r),e.addEventListener("focusout",E,!0),
+// As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here
+(s||d&&"text"===e.type)&&e.addEventListener("input",h)):"blur"===t&&(e.removeEventListener("keyup",r),e.removeEventListener("focusout",E,!0),
+// As only EDGE doesn't trigger the input event after selecting an item via mouse, we need to differentiate here
+(s||d&&"text"===e.type)&&e.removeEventListener("input",h)),
 // Add class for identifying that this input is even already being polyfilled
-e.className+=" "+o};
+e.className+=" "+o},A=function(e){
+// In case of type=email and multiple attribute, we would need to grab the last piece
+// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
+return"email"===e.getAttribute("type")&&null!==e.getAttribute("multiple")?e.value.substring(e.value.lastIndexOf(",")+1):e.value},L=function(e,t){var i;
+// In case of type=email and multiple attribute, we need to set up the resulting inputs value differently
+e.value=
+// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
+"email"===e.getAttribute("type")&&null!==e.getAttribute("multiple")&&-1<(i=e.value.lastIndexOf(","))?e.value.slice(0,i)+","+t:t};
 // 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)
@@ -126,30 +145,27 @@ // Break here for IE10+ & EDGE
 // Function for preparing and sorting the options/suggestions
-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]||k(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
-// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
-"email"===n.getAttribute("type")&&null!==n.getAttribute("multiple")&&(o=o.substring(o.lastIndexOf(",")+1)),
+var k=function(e,n){void 0!==a&&a.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]||x(n,e),o=A(n),l=u.createDocumentFragment(),s=u.createDocumentFragment();
 // Create an array out of the options list
-Array.prototype.slice.call(e.querySelectorAll("option:not(:disabled)")).sort(function(e,t){var a=e.value,i=t.value;
+Array.prototype.slice.call(e.querySelectorAll("option:not(:disabled)")).sort(function(e,t){var i=e.value,a=t.value;
 // Using the knowledge that the values are URLs to allow the user to omit the scheme part and perform intelligent matching on the domain name
-return"url"===n.getAttribute("type")&&(a=a.replace(/(^\w+:|^)\/\//,""),i=i.replace(/(^\w+:|^)\/\//,"")),a.localeCompare(i)}).forEach(function(e){var t=e.value,a=e.getAttribute("label"),i=e.text;
+return"url"===n.getAttribute("type")&&(i=i.replace(/(^\w+:|^)\/\//,""),a=a.replace(/(^\w+:|^)\/\//,"")),i.localeCompare(a)}).forEach(function(e){var t=e.value,i=e.getAttribute("label"),a=e.text;
 // Put this option into the fragment that is meant to get inserted into the select. Additionally according to the specs ...
 // TODO: This might get slightly changed/optimized in a future release
-if(w(e,o)){var n=i.substr(0,t.length+g.length),r;
+if(w(e,o)){var n=a.substr(0,t.length+g.length),r;
 // The innertext should be 'value seperator text' in case they are different
-i&&!a&&i!==t&&n!==t+g?e.innerText=t+g+i:e.text||(
+a&&!i&&a!==t&&n!==t+g?e.innerText=t+g+a:e.text||(
 // Manipulating the option inner text, that would get displayed
-e.innerText=a||t),l.appendChild(e)}else
+e.innerText=i||t),l.appendChild(e)}else
 // ... or put this option that isn't relevant to the users into the fragment that is supposed to get inserted outside of the select
 s.appendChild(e)}),
 // 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=!p&&a<2,
+t.appendChild(l);var i=t.options.length;return t.size=10<i?10:i,t.multiple=!p&&i<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!==r&&r.observe(e,{childList:!0}),t.options},k=function(e,t){
+(e.getElementsByClassName("ie9_fix")[0]||e).appendChild(s),void 0!==a&&a.observe(e,{childList:!0}),t.options},x=function(e,t){
 // Check for whether it's of one of the supported input types defined at the beginning
 // Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
 // and still check for an existing instance
-if(!(e.getAttribute("type")&&-1===l.indexOf(e.getAttribute("type"))||null===t)){var a=e.getClientRects(),
+if(!(e.getAttribute("type")&&-1===l.indexOf(e.getAttribute("type"))||null===t)){var i=e.getClientRects(),
 // Measurements
-i=window.getComputedStyle(e),n=u.createElement("select");
+a=window.getComputedStyle(e),n=u.createElement("select");
 // Setting a class for easier identifying that select afterwards
@@ -161,9 +177,9 @@ // The select should get positioned underneath the input field ...
 // Initially hiding the datalist select
-N(!1,n),
+O(!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"),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"}
+n.setAttribute("aria-live","polite"),n.setAttribute("role","listbox"),p||n.setAttribute("aria-multiselectable","false"),"block"===a.getPropertyValue("display"))n.style.marginTop="-"+a.getPropertyValue("margin-bottom");else{var r="rtl"===a.getPropertyValue("direction")?"right":"left";n.style.setProperty("margin-"+r,"-"+(i[0].width+parseFloat(a.getPropertyValue("margin-"+r)))+"px"),n.style.marginTop=parseInt(i[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",p){var o=u.createElement("option");
+if(n.style.borderRadius=a.getPropertyValue("border-radius"),n.style.minWidth=i[0].width+"px",p){var o=u.createElement("option");
 // ... and it's first entry should contain the localized message to select an entry
@@ -180,31 +196,27 @@ o.innerText=t.title,
 // ... and our upfollowing functions to the related event
-p?n.addEventListener("change",x):n.addEventListener("click",x),n.addEventListener("blur",x),n.addEventListener("keydown",x),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",N):n.addEventListener("click",N),n.addEventListener("blur",N),n.addEventListener("keydown",N),n.addEventListener("keypress",T),n}},T=function(e){var t=e.target,i=t.parentNode,a=u.querySelector('input[list="'+i.id+'"]');
 // Check for whether the events target was a select or whether the input doesn't exist
-"select"===t.tagName.toLowerCase()&&null!==i&&(
+"select"===t.tagName.toLowerCase()&&null!==a&&(
 // Determine a relevant key - either printable characters (that would have a length of 1) or controlling like Backspace
-!e.key||"Backspace"!==e.key&&1!==e.key.length||(i.focus(),"Backspace"===e.key?(i.value=i.value.substr(0,i.value.length-1),
+!e.key||"Backspace"!==e.key&&1!==e.key.length||(a.focus(),"Backspace"===e.key?(a.value=a.value.substr(0,a.value.length-1),
 // Dispatch the input event on the related input[list]
-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+'"]');
+B(a)):a.value+=e.key,k(i,a)))},N=function(e){var t=e.currentTarget,i=t.parentNode,a=u.querySelector('input[list="'+i.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,
+if("select"===t.tagName.toLowerCase()&&null!==a){var n=e.type,
 // ENTER and ESC
-r="keydown"===n&&e.keyCode!==c&&e.keyCode!==v,o;
+r="keydown"===n&&e.keyCode!==c&&e.keyCode!==v;
 // 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===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
-i.value=
-// Using .getAttribute here for IE9 purpose - elsewhere it wouldn't return the newer HTML5 values correctly
-"email"===i.getAttribute("type")&&null!==i.getAttribute("multiple")&&-1<(o=i.value.lastIndexOf(","))?i.value.slice(0,o)+","+t.value:i.value=t.value,
+("change"===n||"click"===n||"keydown"===n&&(e.keyCode===c||"Tab"===e.key))&&0<t.value.length&&t.value!==i.title?(L(a,t.value),
 // Dispatch the input event on the related input[list]
-T(i),
+B(a),
 // Finally focusing the input, as other browser do this as well
-"Tab"!==e.key&&i.focus(),
+"Tab"!==e.key&&a.focus(),
 // #GH-51 / Prevent the form to be submitted on selecting a value via ENTER key within the select
 e.keyCode===c&&e.preventDefault(),
 // Set the visibility to false afterwards, as we're done here
-r=!1;else"keydown"===n&&e.keyCode===v&&
+r=!1):"keydown"===n&&e.keyCode===v&&
 // In case of the ESC key being pressed, we still want to focus the input[list]
-i.focus();
+a.focus(),
 // Toggle the visibility of the datalist select according to previous checks
-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;
+O(r,t)}},B=function(e){var t;"function"==typeof Event?t=new Event("input",{bubbles:!0}):(t=u.createEvent("Event")).initEvent("input",!0,!1),e.dispatchEvent(t)},O=function(e,t){e?t.removeAttribute("hidden"):t.setAttributeNode(u.createAttribute("hidden")),t.setAttribute("aria-hidden",(!e).toString())},S,P;
 // Define function for setting up the polyfilling select
@@ -214,3 +226,3 @@ (
 // list property / https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement
-B=window.HTMLInputElement)&&B.prototype&&void 0===B.prototype.list&&Object.defineProperty(B.prototype,"list",{get:function(){
+S=window.HTMLInputElement)&&S.prototype&&void 0===S.prototype.list&&Object.defineProperty(S.prototype,"list",{get:function(){
 /*
@@ -221,4 +233,4 @@ According to the specs ...
 					*/
-var e=u.getElementById(this.getAttribute("list"));return"object"==typeof this&&this instanceof B&&e&&e.matches("datalist")?e:null}}),(
+var e=u.getElementById(this.getAttribute("list"));return"object"==typeof this&&this instanceof S&&e&&e.matches("datalist")?e:null}}),(
 // Options property / https://developer.mozilla.org/en/docs/Web/API/HTMLDataListElement
-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}})}}();
+P=window.HTMLElement)&&P.prototype&&void 0===P.prototype.options&&Object.defineProperty(P.prototype,"options",{get:function(){return"object"==typeof this&&this instanceof P?this.getElementsByTagName("option"):null}})}}();

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.23.2",
+  "version": "1.23.3",
   "description": "A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.",
@@ -38,3 +38,3 @@ "main": "datalist-polyfill.js",
     "webdriverio": "^5.0.0",
-    "xo": "^0.23.0"
+    "xo": "^0.24.0"
   },
@@ -41,0 +41,0 @@ "xo": {

README.md

@@ -93,4 +93,12 @@ [npm]: https://npmjs.com/package/datalist-polyfill 'datalist polyfill – on NPM'
 
-#### Internet Explorer 9
+#### Microsoft EDGE
 
+Microsoft EDGE doesn't trigger the `input` event any more after selecting an item via mouseclick (on `input` elements other than type of `text`), even though that IE11 still did, nevermind ...
+
+That for the optimizations on substring matching for Microsoft EDGE specifically by #GH-39 need to get restricted to `input[type="text"]` elements even only.
+
+There might be possible solutions to even also achieve the expected behaviour on non-text-input elements - even though that I only could think about ugly solutions that I don't want to have within the polyfill and that might even also break existing CSS & JS architecture / selectors.
+
+#### Microsoft Internet Explorer 9
+
 You'll need the declaration for the standard `hidden` attribute, that you might already have included in case you're using [`normalize.css`](https://github.com/necolas/normalize.css/). Otherwise just adapt it from there:
@@ -97,0 +105,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

150956

increased by1.98%

Lines of code

2321

increased by1.09%

Number of lines in readme file

208

increased by4%

No dependency changes