#56 / IE10: Changes by #39 break script execution due to usage of .da…

…taset

datalist-polyfill.js

@@ -172,11 +172,14 @@
 
 		// 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);
 			}
 
 			// 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
@@ -215,8 +218,9 @@
 			'option[value="' + getInputValue(input).replace(/\\([\s\S])|(")/g, '\\$1$2') + '"]'
 		);
 
-		if (option && option.dataset.originalvalue) {
-			setInputValue(input, 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'));
 		}
 	};
 

datalist-polyfill.min.js

@@ -34,129 +34,135 @@ l=["text","email","number","search","tel","url"],
 // Classes for elements
 o="polyfilled",m="polyfilling",
 // 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+'"]');""!==L(t)&&
+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
-O(A(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
-""===L(t)||i||e.keyCode===c||e.keyCode===v||
+""===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,a),
+!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]||x(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&&(""!==L(t)||i)&&void 0!==r){
+if(e.keyCode!==v&&e.keyCode!==c&&(""!==A(t)||a)&&void 0!==r){
 // ... prepare the options
-0<A(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
-O(n,r)}},b=function(e,t){var a=L(e);
+O(n,r)}},b=function(e,t){var a=A(e);
 // Loop through the options
-Array.prototype.slice.call(t.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)
 /*
 			Check for whether the current option is a valid suggestion and replace its value by
 				- the current input string, as IE10+ and EDGE don't do substring, but only prefix matching
 				- followed by a unique string that should prevent any interferance
 				- and the original string, that is still necessary e.g. for sorting within the suggestions list
 			As the value is being inserted on users selection, we'll replace that one within the upfollowing inputInputListIE function
-			*/,e.value=w(e,a)?a+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="'+L(t).replace(/\\([\s\S])|(")/g,"\\$1$2")+'"]');i&&i.dataset.originalvalue&&k(t,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
 if(
 // Test for whether this input has already been enhanced by the polyfill
 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}
+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]||x(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&&""!==L(t)||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
 O(r,n)}}}},C=function(e,t){
 // We'd like to prevent autocomplete on the input datalist field
 e.setAttribute("autocomplete","off"),
 // WAI ARIA attributes
 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"===t?(e.addEventListener("keyup",n),e.addEventListener("focusout",E,!0),
+"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",n),e.removeEventListener("focusout",E,!0),
+(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},L=function(e){
+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},k=function(e,t){var a;
+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<(a=e.value.lastIndexOf(","))?e.value.slice(0,a)+","+t:t};
+"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)
 // Break here for IE10+ & EDGE
 if(
 // Binding the focus event - matching the input[list]s happens in the function afterwards
 u.addEventListener("focusin",E,!0),!s&&!d){
 // Function for preparing and sorting the options/suggestions
-var A=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]||x(n,e),o=L(n),l=u.createDocumentFragment(),s=u.createDocumentFragment();
+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},x=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
 // The select should get positioned underneath the input field ...
 if(n.setAttribute("class",m),
@@ -167,9 +173,9 @@ 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
 o.innerText=t.title,
 // ... and disable this option, as it shouldn't get selected by the user
@@ -181,29 +187,29 @@ n.appendChild(o)}
 // Add select to datalist element ...
 return t.appendChild(n),
 // ... and our upfollowing functions to the related event
-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,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]
-B(i)):i.value+=e.key,A(a,i)))},N=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;
 // On change, click or after pressing ENTER or TAB key, input the selects value into the input on a change within the list
-("change"===n||"click"===n||"keydown"===n&&(e.keyCode===c||"Tab"===e.key))&&0<t.value.length&&t.value!==a.title?(k(i,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]
-B(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):"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
 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