From 79af45772d470cea425f61351af11005f298253c Mon Sep 17 00:00:00 2001 From: mynamesleon Date: Sun, 1 Nov 2020 18:07:04 +0000 Subject: [PATCH] v1.2.3 --- CHANGELOG.md | 5 +++-- dist/aria-autocomplete.min.js | 2 +- package-lock.json | 2 +- package.json | 2 +- src/autocomplete-constants.ts | 11 ++++++++++- src/autocomplete-helpers.ts | 12 +++++++++++- src/autocomplete.ts | 13 +++++++++---- 7 files changed, 36 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 974039d..d80e311 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,12 +2,13 @@ All notable changes to this project will be documented in this file. -## [1.2.2] - 2020-11-01 +## [1.2.3] - 2020-11-01 ### Fixed - The `create` option not applying to starting values. - The `create` option persistence now correctly only applies when the autocomplete is used to progressively enhance a `"),e.showAllControl&&s.push('');var o=e.srListLabelText,a=e.listClassName?" "+e.listClassName:"",h=o?' aria-label="'+o+'"':"";s.push('"),s.push('"),s.push(""),this.element.insertAdjacentHTML("afterend",s.join(""))},e.prototype.destroy=function(){var e=this;this.label&&this.label._ariaAutocompleteLabelOriginallyFor&&(this.label.setAttribute("for",this.label._ariaAutocompleteLabelOriginallyFor),delete this.label._ariaAutocompleteLabelOriginallyFor),this.documentClickBound&&document.removeEventListener("click",this.documentClick),this.autoGrow&&this.inputAutoWidth&&this.inputAutoWidth.destroy(),this.wrapper.parentNode.removeChild(this.wrapper),delete this.element.ariaAutocomplete,this.show(this.element),clearTimeout(this.filterTimer),clearTimeout(this.pollingTimer),clearTimeout(this.showAllPrepTimer),clearTimeout(this.announcementTimer),clearTimeout(this.componentBlurTimer),clearTimeout(this.clearAnnouncementTimer),clearTimeout(this.elementChangeEventTimer),["list","input","label","element","wrapper","showAll","deleteAll","srAssistance","srAnnouncements"].forEach((function(t){return e[t]=null}))},e.prototype.init=function(e,t){this.selected=[],this.element=e,this.label=document.querySelector('[for="'+this.element.id+'"]'),this.ids=new E(this.element.id,this.label?this.label.id:null,t.id),this.elementIsInput="INPUT"===e.nodeName,this.options=new h(t),this.label&&!this.label.id&&(this.label.id=this.ids.LABEL),this.source=this.options.source,this.multiple=this.options.multiple,this.autoGrow=this.options.autoGrow,this.cssNameSpace=this.options.cssNameSpace,this.documentClick=this.handleComponentBlur.bind(this),this.setHtml(),this.list=document.getElementById(this.ids.LIST),this.input=document.getElementById(this.ids.INPUT),this.wrapper=document.getElementById(this.ids.WRAPPER),this.showAll=document.getElementById(this.ids.BUTTON),this.srAssistance=document.getElementById(this.ids.SR_ASSISTANCE),this.srAnnouncements=document.getElementById(this.ids.SR_ANNOUNCEMENTS),this.prepListSource();var i=[];this.options.showAllControl&&i.push(this.cssNameSpace+"__wrapper--show-all"),this.autoGrow&&i.push(this.cssNameSpace+"__wrapper--autogrow"),this.multiple&&i.push(this.cssNameSpace+"__wrapper--multiple"),i.length&&a(this.wrapper,i.join(" ")),this.hide(this.list),this.hide(this.element),this.setInputStartingStates(),this.bindEvents(),this.api=new S(this),this.triggerOptionCallback("onReady",[this.wrapper])},e}();function M(e,t){return e&&e.ariaAutocomplete&&e.ariaAutocomplete.open?e.ariaAutocomplete:new B(e,t).api}t.default=M}])})); \ No newline at end of file +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var i=t();for(var s in i)("object"==typeof exports?exports:e)[s]=i[s]}}(window,(function(){return function(e){var t={};function i(s){if(t[s])return t[s].exports;var n=t[s]={i:s,l:!1,exports:{}};return e[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=e,i.c=t,i.d=function(e,t,s){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(s,n,function(t){return e[t]}.bind(null,n));return s},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=2)}([function(e,t,i){window,e.exports=function(e){var t={};function i(s){if(t[s])return t[s].exports;var n=t[s]={i:s,l:!1,exports:{}};return e[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=e,i.c=t,i.d=function(e,t,s){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(s,n,function(t){return e[t]}.bind(null,n));return s},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=0)}([function(e,t,i){"use strict";var s;function n(e,t){if(e)for(var i in t){var s="number"==typeof t[i]?t[i]+"px":t[i];e.style[i]=s+""}}i.r(t),i.d(t,"InputAutoWidth",(function(){return r}));var r=function(){function e(e,t){this.cache={},this.options=t,this.input=e,this.trigger(),this.eventHandler=this.trigger.bind(this),this.input.addEventListener("blur",this.eventHandler),this.input.addEventListener("input",this.eventHandler),this.input.addEventListener("keyup",this.eventHandler),this.input.addEventListener("keydown",this.eventHandler)}return e.prototype.measureString=function(e){return e?this.cache&&"number"==typeof this.cache[e]?this.cache[e]:(s||(n(s=document.createElement("span"),{position:"absolute",top:-99999,left:-99999,width:"auto",padding:0,whiteSpace:"pre"}),document.body.appendChild(s)),s.textContent=e,function(e,t,i){if(e&&t){var s=getComputedStyle(e),r={};if(i&&i.length)for(var l=0,o=i.length;l=48&&t<=57||t>=65&&t<=90||t>=96&&t<=111||t>=186&&t<=222||32===t||8===t||46===t){var a=String.fromCharCode(n);s+=a=e.shiftKey?a.toUpperCase():a.toLowerCase()}}!s&&(i=this.input.getAttribute("placeholder"))&&(s=i);var h=this.measureString(s)+4;this.options&&this.options.cache&&this.cache&&(this.cache[s]=h);var u=this.options&&this.options.minWidth;"number"==typeof u&&hc&&(h=c),h!==this.currentWidth&&(this.currentWidth=h,this.input.style.width=h+"px")}},e.prototype.destroy=function(){this.input.removeEventListener("blur",this.eventHandler),this.input.removeEventListener("input",this.eventHandler),this.input.removeEventListener("keyup",this.eventHandler),this.input.removeEventListener("keydown",this.eventHandler),this.input=this.cache=null},e}();t.default=r}])},function(e,t){var i=Element.prototype;i.matches||(i.matches=i.msMatchesSelector||i.webkitMatchesSelector),i.closest||(i.closest=function(e){var t=this;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null})},function(e,t,i){"use strict";i.r(t),i.d(t,"AriaAutocomplete",(function(){return V}));var s=i(0),n=i.n(s),r=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function l(e,t){if(e&&1===e.nodeType&&"string"==typeof t)!function(e,t){for(var i=e.getAttribute&&e.getAttribute("class")||"",s=" "+i+" ",n=0,l=t.split(" "),o=l.length;n"']/g,w={"&":"&","<":"<",">":">",'"':""","'":"'"},E=function(){function e(e){this.list=e.list,this.input=e.input,this.wrapper=e.wrapper,this.options=e.options,this.selected=e.selected,this.open=this.open.bind(e),this.close=this.close.bind(e),this.enable=this.enable.bind(e),this.disable=this.disable.bind(e),this.filter=this.filter.bind(e),this.destroy=this.destroy.bind(e),e.element.ariaAutocomplete=this}return e.prototype.open=function(){this.show.call(this)},e.prototype.close=function(){this.hide.call(this)},e.prototype.enable=function(){this.enable.call(this)},e.prototype.disable=function(e){this.disable.call(this,e)},e.prototype.filter=function(e){this.filter.call(this,e)},e.prototype.destroy=function(){this.destroy.call(this)},e}(),x=0,T=function(e,t,i){x+=1,this.ELEMENT=e;var s=i||e||"";this.PREFIX=s+"aria-autocomplete-"+x,this.LIST=this.PREFIX+"-list",this.BUTTON=this.PREFIX+"-button",this.OPTION=this.PREFIX+"-option",this.WRAPPER=this.PREFIX+"-wrapper",this.LABEL=t||this.PREFIX+"-label",this.INPUT=i||this.PREFIX+"-input",this.SR_ASSISTANCE=this.PREFIX+"-sr-assistance",this.OPTION_SELECTED=this.PREFIX+"-option-selected",this.SR_ANNOUNCEMENTS=this.PREFIX+"-sr-announcements"};i(1);function O(e){return null==e?"":(e+"").trim()}function _(e){return"string"==typeof e&&e?e.replace(S,(function(e){return w[e]})):""}var C=/&/g,I=/\s\s+/g,L=/[\u2018\u2019',:\u2013-]/g,N=/[\-\[\]{}()*+?.,\\\^$|#\s]/g;function P(e,t){return void 0===t&&(t=!1),e=O(e).toLowerCase().replace(L,"").replace(C,"and").replace(I," "),t&&(e=e.replace(N,"\\$&")),e}function F(){for(var e=[],t=0;t-1)&&i.clearAnnouncement("number"==typeof t?t:5e3)};0!==t?(clearTimeout(this.announcementTimer),this.announcementTimer=setTimeout((function(){return s()}),t)):s()}},e.prototype.isSelectedElem=function(e){var t=e&&e[c];return!(!this.multiple||"object"!=typeof t)},e.prototype.getSelectedElems=function(){for(var e=[],t=0,i=this.wrapper.childNodes.length;t-1&&this.selected[i]){var r=F(this.selected[i]),l=r.label;D(r.element,!1,this),this.selected.splice(i,1),this.triggerOptionCallback("onDelete",[r]),this.setSourceElementValues(),this.buildMultiSelected(t?i:null),this.triggerAutoGrow(),this.announce(l+" "+this.options.srDeletedText,0)}}},e.prototype.createSelectedElemFrom=function(e,t){var i=e.label,s=this.cssNameSpace,n=s+"__selected",r=document.createElement("span"),l=t?s+"__delete-all "+n+" "+n+"--delete-all":n;return r.setAttribute("aria-describedby",this.ids.LABEL),r.setAttribute("class",l),r.setAttribute("role","button"),r.setAttribute("tabindex","0"),r.textContent=i,t||(r.setAttribute("aria-label",this.options.srDeleteText+" "+i),r[c]=e),r},e.prototype.buildMultiSelected=function(e){var t=this;if(this.multiple){this.multiple&&this.selected.length>=this.options.maxItems?this.disable():this.enable();var i=this.getSelectedElems();if(this.selected.length||i.length){var s=[];i.forEach((function(e){for(var i=e[c],n=0,r=t.selected.length;n=s.length)return this.currentSelectedIndex=s.length-1,void this.setOptionFocus(e,this.currentSelectedIndex);var n=s[t];if(n&&"string"==typeof n.getAttribute("tabindex"))return this.currentSelectedIndex=t,a(n,this.cssNameSpace+"__option--focused focused focus"),n.setAttribute("aria-selected","true"),void(i&&n.focus());this.currentSelectedIndex=-1},e.prototype.setSourceElementValues=function(){for(var e=[],t=0,i=this.selected.length;t=this.options.maxItems)&&this.filteredSource.length&&this.filteredSource[t]){for(var s=F(this.filteredSource[t]),n=!1,r=0,l=this.selected.length;r-1||this.indexOfValueIn(this.source,n,"label")>-1)){var l;if(i){var o=this.element.querySelector("option"),a=o.cloneNode(!0);a.textContent=n,a.value=r,l=a,o.parentNode.insertBefore(a,o)}else if(s){var h=this.element.querySelector('input[type="checkbox"]'),u=h.cloneNode(!0),c=h.closest("label"),p=document.createElement("label");p.textContent=n,u.value=r,l=u,p.appendChild(u);var d=c||h;d.parentNode.insertBefore(p,d)}l&&(e.element=l,l.removeAttribute("id")),this.source.unshift(e)}}},e.prototype.prependEntryInCreateMode=function(e,t){var i=this.options.create;if((!0===i||"function"==typeof i)&&P(e)){var s,n=O(e),r=this.options.sourceMapping;if(!0===i&&(s=B(n,r)),"function"==typeof i){var l=i(n),o=typeof l;l&&("string"===o||"object"===o&&!Array.isArray(l))&&(s=B(l,r))}!s||!s.label||!s.value||this.indexOfValueIn(t,s[u],u)>-1||this.indexOfValueIn(t,s.value,"value")>-1||t.unshift(s)}},e.prototype.setListOptions=function(e){var t=this.options.sourceMapping;this.prependEntryInCreateMode(this.term,e);var i=this.removeSelectedFromResults(e),s=this.triggerOptionCallback("onResponse",[i]);this.filteredSource=Array.isArray(s)?M(s,t):i;for(var n=this.ids.OPTION,r=this.cssNameSpace,o=r+"__option",h=this.filteredSource.length,u="function"==typeof this.options.onItemRender,c=this.forceShowAll?9999:this.options.maxResults,p=c'+_(b)+"")}var y,g=!d.length;g?(l(this.list,r+"__list--has-results"),a(this.list,r+"__list--no-results")):(a(this.list,r+"__list--has-results"),l(this.list,r+"__list--no-results"));var A=this.options.noResultsText;g&&"string"==typeof A&&A.length&&(y=A,d.push('
  • '+_(A)+"
    • ")),this.cancelFilterPrep(),y||(y=this.triggerOptionCallback("srResultsText",[p])),y&&this.announce(y);var S=d.join("");if(this.currentListHtml!==S?(this.currentListHtml=S,this.list.innerHTML=S):this.resetOptionAttributes(),!d.length)return this.hide(),void(this.forceShowAll=!1);this.show(),this.forceShowAll=!1},e.prototype.handleAsync=function(e,t){var i=this;void 0===t&&(t=!1),this.xhr&&"function"==typeof this.xhr.abort&&this.xhr.abort();var s=new XMLHttpRequest,n=this.forceShowAll,r=t?null:this.api,l=this.multiple?this.selected.length:0,o=n||t||9999===this.options.maxResults,a=this.source+(/\?/.test(this.source)?"&":"?")+encodeURIComponent(this.options.asyncQueryParam)+"="+encodeURIComponent(e)+"&"+encodeURIComponent(this.options.asyncMaxResultsParam)+"="+(o?9999:l+this.options.maxResults),h=this.triggerOptionCallback("onAsyncPrep",[a,s,t],r);h&&"string"==typeof h&&(a=h),s.open("GET",a),s.onload=function(){if(s.readyState===s.DONE&&s.status>=200&&s.status<300){i.forceShowAll=n;var l=M(i.triggerOptionCallback("onAsyncSuccess",[e,s,t],r)||s.responseText,i.options.sourceMapping);t?(i.prepSelectedFromArray(l),i.setInputStartingStates(!1)):i.setListOptions(l),i.triggerOptionCallback("onAsyncComplete",[e,s,t],r)}},s.onerror=function(){i.triggerOptionCallback("onAsyncError",[e,s,t],r)},t||(this.xhr=s),this.triggerOptionCallback("onAsyncBeforeSend",[e,s,t],r),s.send()},e.prototype.filter=function(e){var t=this;if("string"==typeof e){var i=this.forceShowAll;if(!i){var s=this.triggerOptionCallback("onSearch",[e]);"string"==typeof s&&(e=s)}if(this.term=e,"string"==typeof this.source&&this.source.length)return this.handleAsync(e),void(this.forceShowAll=!1);if("function"!=typeof this.source){e||(i=!0);var n=[],r=this.source;if(r&&r.length){var l=[u];if(!i){e=P(e,!0);var o=this.options.alsoSearchIn;Array.isArray(o)&&o.length&&(l=function(e){var t=[];return e.forEach((function(e){if("string"==typeof e){for(var i=O(e),s="label"!==i,n=0,r=t.length;s&&n-1&&j(n,t,s))return!0}return!1}(t,e,l))&&n.push(t)}))}this.setListOptions(n)}else{var a=function(e){var i=M(e,t.options.sourceMapping);t.setListOptions(i)},h=this.source.call(this.api,this.term,a,!1);h&&"function"==typeof h.then&&h.then((function(e){return a(e)}))}}else this.cancelFilterPrep()},e.prototype.cancelFilterPrep=function(){clearTimeout(this.filterTimer),l(this.wrapper,this.cssNameSpace+"__wrapper--loading loading"),l(this.input,this.cssNameSpace+"__input--loading loading"),this.filtering=!1},e.prototype.filterPrep=function(e,t,i){var s=this;void 0===t&&(t=!1),void 0===i&&(i=!1);var n=this.forceShowAll,r=n||i?0:this.options.delay;this.cancelFilterPrep(),this.filtering=!0,this.filterTimer=setTimeout((function(){var i=s.input.value;if(s.inputPollingValue=i,(n||""===i||t&&!s.multiple&&s.selected.length&&O(s.selected[0].label)===O(i))&&(i=""),!n&&i.length=t)&&this.filterPrep(e)}if(this.menuOpen&&!this.filtering){var i=this.currentSelectedIndex;"number"!=typeof i||i<0?this.setOptionFocus(e,0):this.setOptionFocus(e,i+1)}},e.prototype.handleEndKey=function(e){if(!this.disabled&&this.menuOpen&&e.target!==this.input){var t=R(this.list);t.length&&(e.preventDefault(),this.setOptionFocus(e,t.length-1))}},e.prototype.handleHomeKey=function(e){!this.disabled&&this.menuOpen&&e.target!==this.input&&(e.preventDefault(),this.setOptionFocus(e,0))},e.prototype.handleEnterKey=function(e){var t=e.target;this.isSelectedElem(t)?this.removeEntryFromSelected(t[c],!0):this.deleteAll&&t===this.deleteAll?this.deleteAllSelected():this.disabled||(this.showAll&&t===this.showAll?this.filterPrepShowAll(e):(this.menuOpen&&(e.preventDefault(),this.currentSelectedIndex>-1&&this.handleOptionSelect(e,this.currentSelectedIndex)),t===this.input&&this.filterPrep(e,!1,!0)))},e.prototype.handleKeyDownDefault=function(e){var t=e.keyCode,i=e.target===this.input;if(t===m&&!i||this.isSelectedElem(e.target)&&t===A)return e.preventDefault(),void this.handleEnterKey(e);if(!this.disabled){var s=this.selected&&this.selected.length;this.options.deleteOnBackspace&&t===p&&""===this.input.value&&s&&i&&this.multiple&&this.removeEntryFromSelected(this.selected[s-1]);var n=function(e){return e>=48&&e<=57||e>=65&&e<=90||e>=96&&e<=111||e>=186&&e<=222||32===e||8===e||46===e}(t),r=!i&&n;r&&this.input.focus(),(r||i&&n)&&this.filterPrep(e)}},e.prototype.prepKeyDown=function(e){switch(e.keyCode){case y:this.handleUpKey(e);break;case g:this.handleDownKey(e);break;case v:this.handleEndKey(e);break;case b:this.handleHomeKey(e);break;case d:this.handleEnterKey(e);break;case f:this.handleComponentBlur(e,!0);break;default:this.handleKeyDownDefault(e)}},e.prototype.cancelPolling=function(){clearTimeout(this.pollingTimer)},e.prototype.startPolling=function(){var e=this;this.filtering||this.input.value===this.inputPollingValue||this.filterPrep({}),this.pollingTimer=setTimeout((function(){e.startPolling()}),200)},e.prototype.bindEvents=function(){var e=this;this.wrapper.addEventListener("focusout",(function(t){e.handleComponentBlur(t,!1)})),this.wrapper.addEventListener("focusin",(function(t){e.list.contains(t.target)||(e.currentSelectedIndex=-1),e.isFocused||e.triggerOptionCallback("onFocus",[e.wrapper]),e.isFocused=!0})),this.wrapper.addEventListener("keydown",(function(t){e.prepKeyDown(t)})),this.wrapper.addEventListener("click",(function(t){t.target!==e.wrapper?(e.isSelectedElem(t.target)&&e.removeEntryFromSelected(t.target[c],!0),e.deleteAll&&t.target===e.deleteAll&&e.deleteAllSelected()):e.input.focus()}));var t=this.cssNameSpace+"__wrapper--focused focused focus",i=this.cssNameSpace+"__input--focused focused focus";this.input.addEventListener("blur",(function(){l(e.wrapper,t),l(e.input,i),e.cancelPolling()})),this.input.addEventListener("input",(function(t){document.activeElement===e.input&&e.filterPrep(t)})),this.input.addEventListener("click",(function(t){!e.menuOpen&&e.input.value.length>=e.options.minLength&&e.filterPrep(t,!0)})),this.input.addEventListener("focusin",(function(s){a(e.wrapper,t),a(e.input,i),e.startPolling(),e.disabled||e.menuOpen||e.filterPrep(s,!0)})),this.showAll&&this.showAll.addEventListener("click",(function(t){e.filterPrepShowAll(t)})),this.list.addEventListener("mouseenter",(function(t){e.resetOptionAttributes()})),this.list.addEventListener("click",(function(t){if(t.target!==e.list){var i=R(e.list);if(i.length){var s=i.indexOf(t.target);e.handleOptionSelect(t,s)}}})),this.autoGrow&&(this.inputAutoWidth=new n.a(this.input))},e.prototype.prepListSourceCheckboxes=function(){this.multiple=!0,this.source=[];for(var e=this.element.querySelectorAll('input[type="checkbox"]'),t=0,i=e.length;t1&&(this.options.maxItems=1),this.source=[];for(var t=this.element.querySelectorAll("option"),i=0,s=t.length;i-1&&t.selected.push(o[i])}}))}},e.prototype.prepListSourceArray=function(){this.source=M(this.source,this.options.sourceMapping),this.prepSelectedFromArray(this.source)},e.prototype.prepListSourceAsync=function(){var e=this.element;this.elementIsInput&&e.value&&this.handleAsync(e.value,!0)},e.prototype.prepListSourceFunction=function(){var e=this,t=this.element;if(this.elementIsInput&&t.value){var i=function(t){var i=M(t,e.options.sourceMapping);e.prepSelectedFromArray(i),e.setInputStartingStates(!1)},s=this.source.call(void 0,t.value,i,!0);s&&"function"==typeof s.then&&s.then((function(e){return i(e)}))}},e.prototype.prepListSource=function(){return"function"==typeof this.source?this.prepListSourceFunction():"string"==typeof this.source&&this.source.length?this.prepListSourceAsync():Array.isArray(this.source)&&this.source.length?this.prepListSourceArray():(this.sourceFromSelect="SELECT"===this.element.nodeName,this.sourceFromSelect?this.prepListSourceDdl():(this.sourceFromCheckboxList=!!this.element.querySelector('input[type="checkbox"]'),this.sourceFromCheckboxList?this.prepListSourceCheckboxes():void(this.source=[])))},e.prototype.setInputStartingStates=function(e){if(void 0===e&&(e=!0),e){this.label&&(this.label._ariaAutocompleteLabelOriginallyFor=this.ids.ELEMENT,this.label.setAttribute("for",this.ids.INPUT));var t=this.element.getAttribute("aria-describedby");t&&this.input.setAttribute("aria-describedby",t);var i=this.element.getAttribute("aria-labelledby");i&&this.input.setAttribute("aria-labelledby",i)}this.selected.length&&(this.multiple?(this.buildMultiSelected(),this.triggerAutoGrow()):this.setInputValue(this.selected[0].label||"",!0)),this.element.disabled&&this.disable(!0)},e.prototype.setHtml=function(){var e=this.options,t=this.cssNameSpace,i=e.wrapperClassName?" "+e.wrapperClassName:"",s=['
    '];s.push('

    ');var n=e.name?' name="'+e.name+'"':"",r=e.inputClassName?" "+e.inputClassName:"",l=e.placeholder?' placeholder="'+e.placeholder+'" aria-placeholder="'+e.placeholder+'"':"";s.push('"),e.showAllControl&&s.push('');var o=e.srListLabelText,a=e.listClassName?" "+e.listClassName:"",h=o?' aria-label="'+o+'"':"";s.push('"),s.push('"),s.push("
    "),this.element.insertAdjacentHTML("afterend",s.join(""))},e.prototype.destroy=function(){var e=this;this.label&&this.label._ariaAutocompleteLabelOriginallyFor&&(this.label.setAttribute("for",this.label._ariaAutocompleteLabelOriginallyFor),delete this.label._ariaAutocompleteLabelOriginallyFor),this.documentClickBound&&document.removeEventListener("click",this.documentClick),this.autoGrow&&this.inputAutoWidth&&this.inputAutoWidth.destroy(),this.wrapper.parentNode.removeChild(this.wrapper),delete this.element.ariaAutocomplete,this.show(this.element),clearTimeout(this.filterTimer),clearTimeout(this.pollingTimer),clearTimeout(this.showAllPrepTimer),clearTimeout(this.announcementTimer),clearTimeout(this.componentBlurTimer),clearTimeout(this.clearAnnouncementTimer),clearTimeout(this.elementChangeEventTimer),["list","input","label","element","wrapper","showAll","deleteAll","srAssistance","srAnnouncements"].forEach((function(t){return e[t]=null}))},e.prototype.init=function(e,t){this.selected=[],this.element=e,this.label=document.querySelector('[for="'+this.element.id+'"]'),this.ids=new T(this.element.id,this.label?this.label.id:null,t.id),this.elementIsInput="INPUT"===e.nodeName,this.options=new h(t),this.label&&!this.label.id&&(this.label.id=this.ids.LABEL),this.source=this.options.source,this.multiple=this.options.multiple,this.autoGrow=this.options.autoGrow,this.cssNameSpace=this.options.cssNameSpace,this.documentClick=this.handleComponentBlur.bind(this),this.setHtml(),this.list=document.getElementById(this.ids.LIST),this.input=document.getElementById(this.ids.INPUT),this.wrapper=document.getElementById(this.ids.WRAPPER),this.showAll=document.getElementById(this.ids.BUTTON),this.srAssistance=document.getElementById(this.ids.SR_ASSISTANCE),this.srAnnouncements=document.getElementById(this.ids.SR_ANNOUNCEMENTS),this.prepListSource();var i=[];this.options.showAllControl&&i.push(this.cssNameSpace+"__wrapper--show-all"),this.autoGrow&&i.push(this.cssNameSpace+"__wrapper--autogrow"),this.multiple&&i.push(this.cssNameSpace+"__wrapper--multiple"),i.length&&a(this.wrapper,i.join(" ")),this.hide(this.list),this.hide(this.element),this.setInputStartingStates(),this.bindEvents(),this.api=new E(this),this.triggerOptionCallback("onReady",[this.wrapper])},e}();function V(e,t){return e&&e.ariaAutocomplete&&e.ariaAutocomplete.open?e.ariaAutocomplete:new K(e,t).api}t.default=V}])})); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9e1bfbf..4524639 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "aria-autocomplete", - "version": "1.2.2", + "version": "1.2.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index af049e1..db503fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aria-autocomplete", - "version": "1.2.2", + "version": "1.2.3", "description": "Accessible, extensible, JavaScript autocomplete with multi-select", "main": "dist/aria-autocomplete.min.js", "style": "dist/aria-autocomplete.css", diff --git a/src/autocomplete-constants.ts b/src/autocomplete-constants.ts index 1d8dcca..7cbdb19 100644 --- a/src/autocomplete-constants.ts +++ b/src/autocomplete-constants.ts @@ -16,5 +16,14 @@ export const KEYCODES = { UP: 38, RIGHT: 39, DOWN: 40, - DELETE: 46 + DELETE: 46, +}; + +export const UNESCAPED_HTML_REGEX = /[&<>"']/g; +export const HTML_REPLACEMENTS = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''', }; diff --git a/src/autocomplete-helpers.ts b/src/autocomplete-helpers.ts index 169af16..ed067d6 100644 --- a/src/autocomplete-helpers.ts +++ b/src/autocomplete-helpers.ts @@ -1,4 +1,4 @@ -import { CLEANED_LABEL_PROP } from './autocomplete-constants'; +import { CLEANED_LABEL_PROP, UNESCAPED_HTML_REGEX, HTML_REPLACEMENTS } from './autocomplete-constants'; /** * remove start and end whitespace from string @@ -7,6 +7,16 @@ export function trimString(theString?: any): string { return theString == null ? '' : (theString + '').trim(); } +/** + * convert &, <, >, ", and ' in a string to their HTML entities + */ +export function escapeHtml(value: string): string { + if (typeof value !== 'string' || !value) { + return ''; + } + return value.replace(UNESCAPED_HTML_REGEX, (character) => HTML_REPLACEMENTS[character]); +} + const REGEX_AMPERSAND = /&/g; const REGEX_DUPE_WHITESPACE = /\s\s+/g; const REGEX_TO_IGNORE = /[\u2018\u2019',:\u2013-]/g; diff --git a/src/autocomplete.ts b/src/autocomplete.ts index f36b95e..60e471b 100644 --- a/src/autocomplete.ts +++ b/src/autocomplete.ts @@ -19,6 +19,7 @@ import { import { trimString, + escapeHtml, cleanString, mergeObjects, dispatchEvent, @@ -846,11 +847,11 @@ export default class Autocomplete { for (let i = 0; i < lengthToUse; i += 1) { const thisSource: any = this.filteredSource[i]; const callbackResponse = checkCallback && this.triggerOptionCallback('onItemRender', [thisSource]); - const itemContent = callbackResponse || thisSource.label; + const itemContent = typeof callbackResponse === 'string' ? callbackResponse : thisSource.label; toShow.push( `
  • ${itemContent}
    • ` + `aria-setsize="${lengthToUse}">${escapeHtml(itemContent)}` ); } @@ -869,7 +870,9 @@ export default class Autocomplete { const { noResultsText: noText } = this.options; if (noResults && typeof noText === 'string' && noText.length) { announce = noText; - toShow.push(`
  • ${noText}
    • `); + toShow.push( + `
  • ${escapeHtml(noText)}
    • ` + ); } // remove loading class(es) and reset variables @@ -1766,7 +1769,9 @@ export default class Autocomplete { ); // add the screen reader assistance element - newHtml.push(``); + newHtml.push( + `` + ); // close all and append newHtml.push(``);