diff --git a/README.md b/README.md index fadc4d1..85dac60 100644 --- a/README.md +++ b/README.md @@ -47,13 +47,13 @@ autoComplete.js is a simple pure vanilla Javascript library that's progressively `JS` ```html - + ``` `CSS` ```html - + ``` #### Package Manager diff --git a/dist/js/autoComplete.js b/dist/js/autoComplete.js index 5a34db5..fabffb8 100644 --- a/dist/js/autoComplete.js +++ b/dist/js/autoComplete.js @@ -162,7 +162,6 @@ list.setAttribute("id", config.resultsList.idName); list.setAttribute("class", config.resultsList.className); list.setAttribute("role", "listbox"); - list.setAttribute("tabindex", "-1"); if (config.resultsList.container) config.resultsList.container(list); var destination = "string" === typeof config.resultsList.destination ? document.querySelector(config.resultsList.destination) : config.resultsList.destination(); destination.insertAdjacentElement(config.resultsList.position, list); @@ -187,9 +186,9 @@ })); }); - var closeList = function closeList(config, element) { + var closeList = function closeList(config) { var list = document.getElementById(config.resultsList.idName); - if (list && element !== config.inputField) { + if (list) { list.remove(); config.inputField.removeAttribute("aria-activedescendant"); config.inputField.setAttribute("aria-expanded", false); @@ -278,7 +277,6 @@ config.inputField.value = ""; closeList(config); break; - case 9: case 40: update(event, list, true); break; @@ -532,8 +530,8 @@ generateList(this, dataFeedback, results); navigate(this, dataFeedback); eventEmitter(this.inputField, dataFeedback, "open"); - document.addEventListener("click", function (event) { - return closeList(_this, event.target); + document.addEventListener("focusout", function () { + return closeList(_this); }); } }, { diff --git a/dist/js/autoComplete.js.gz b/dist/js/autoComplete.js.gz index 1cf412c..d90f4cf 100644 Binary files a/dist/js/autoComplete.js.gz and b/dist/js/autoComplete.js.gz differ diff --git a/dist/js/autoComplete.min.js b/dist/js/autoComplete.min.js index 93c322f..4e71c89 100644 --- a/dist/js/autoComplete.min.js +++ b/dist/js/autoComplete.min.js @@ -1 +1 @@ -var e,t;e=this,t=function(){"use strict";function e(e,t){for(var n=0;ne.length)&&(t=e.length);for(var n=0,i=new Array(t);n=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},f:s}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,l=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){l=!0,o=e},f:function(){try{a||null==n.return||n.return()}finally{if(l)throw o}}}}var o=function(e,t,n){e.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:t,cancelable:!0}))},a=function(e,t){var n=document.getElementById(e.resultsList.idName);n&&t!==e.inputField&&(n.remove(),e.inputField.removeAttribute("aria-activedescendant"),e.inputField.setAttribute("aria-expanded",!1),o(e.inputField,null,"close"))},l=function(e,t,n){var r=document.getElementById(e.resultsList.idName);if(r?r.innerHTML="":r=function(e){var t=document.createElement(e.resultsList.element);return t.setAttribute("id",e.resultsList.idName),t.setAttribute("class",e.resultsList.className),t.setAttribute("role","listbox"),t.setAttribute("tabindex","-1"),e.resultsList.container&&e.resultsList.container(t),("string"==typeof e.resultsList.destination?document.querySelector(e.resultsList.destination):e.resultsList.destination()).insertAdjacentElement(e.resultsList.position,t),t}(e),e.inputField.setAttribute("aria-expanded",!0),n.length)for(var s=function(s){var o=t.results[s],a=function(e,t,n){var i=document.createElement(n.resultItem.element);return i.setAttribute("id","".concat(n.resultItem.idName,"_").concat(t)),i.setAttribute("class",n.resultItem.className),i.setAttribute("role","option"),i.innerHTML=e.match,n.resultItem.content&&n.resultItem.content(e,i),i}(o,s,e);a.addEventListener("click",(function(r){var a={event:r,matches:n,input:t.input,query:t.query,results:t.results,selection:i(i({},o),{},{index:s})};e.onSelection&&e.onSelection(a)})),r.appendChild(a)},o=0;o=t.length&&(n=0),n<0&&(n=t.length-1),t[n].setAttribute("aria-selected","true"),e.resultItem.selected.className&&t[n].classList.add(e.resultItem.selected.className)},l=e.resultsList.navigation||function(t){var i=document.getElementById(e.resultsList.idName);if(i)switch(i=i.getElementsByTagName(e.resultItem.element),t.keyCode){case 27:e.inputField.value="",a(e);break;case 9:case 40:r(t,i,!0);break;case 38:r(t,i,!1);break;case 13:t.preventDefault(),n>-1&&(i[n].click(),a(e))}else e.inputField.removeEventListener(u,l)};e.inputField.autoCompleteNavigate&&e.inputField.removeEventListener(u,e.inputField.autoCompleteNavigate),e.inputField.autoCompleteNavigate=l,e.inputField.addEventListener(u,l)},d=function(e,t){for(var n=[],i=function(i){var r=e.data.store[i],o=function(s){var o=(s?r[s]:r).toString();if(o){var a="function"==typeof e.searchEngine?e.searchEngine(t,o):function(e,t,n){var i=n.diacritics?t.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").normalize("NFC"):t.toLowerCase();if("loose"===n.searchEngine){e=e.replace(/ /g,"");for(var r=[],s=0,o=0;o').concat(a,""):a,s++),r.push(a)}if(s===e.length)return r.join("")}else if(i.includes(e)){var l=new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"),"i");return e=l.exec(t),n.resultItem.highlight.render?t.replace(e,'').concat(e,"")):t}}(t,o,e);a&&s?n.push({key:s,index:i,match:a,value:r}):a&&!s&&n.push({index:i,match:a,value:r})}};if(e.data.key){var a,l=s(e.data.key);try{for(l.s();!(a=l.n()).done;)o(a.value)}catch(e){l.e(e)}finally{l.f()}}else o()},r=0;r=e.threshold&&n.replace(/ /g,"").length}(t,e,s)?t.dataStore().then((function(e){try{return t.start(r,s),c.call(t)}catch(e){return i(e)}}),i):(a(t),c.call(t));function c(){return n()}}))}},{key:"init",value:function(){var e,t,n,i,r=this;(e=this).inputField.setAttribute("role","combobox"),e.inputField.setAttribute("aria-haspopup",!0),e.inputField.setAttribute("aria-expanded",!1),e.inputField.setAttribute("aria-controls",e.resultsList.idName),e.inputField.setAttribute("aria-autocomplete","both"),this.placeHolder&&this.inputField.setAttribute("placeholder",this.placeHolder),this.hook=(t=function(e){r.compose(e)},n=this.debounce,function(){var e=this,r=arguments;clearTimeout(i),i=setTimeout((function(){return t.apply(e,r)}),n)}),this.trigger.event.forEach((function(e){r.inputField.removeEventListener(e,r.hook),r.inputField.addEventListener(e,r.hook)})),o(this.inputField,null,"init")}},{key:"preInit",value:function(){var e=this;new MutationObserver((function(t,n){var i,r=s(t);try{for(r.s();!(i=r.n()).done;)i.value,e.inputField&&(n.disconnect(),e.init())}catch(e){r.e(e)}finally{r.f()}})).observe(document,{childList:!0,subtree:!0})}},{key:"unInit",value:function(){this.inputField.removeEventListener("input",this.hook),o(this.inputField,null,"unInit")}}])&&e(n.prototype,i),r&&e(n,r),t}()},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).autoComplete=t(); +var e,t;e=this,t=function(){"use strict";function e(e,t){for(var n=0;ne.length)&&(t=e.length);for(var n=0,i=new Array(t);n=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},f:s}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,l=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){l=!0,o=e},f:function(){try{a||null==n.return||n.return()}finally{if(l)throw o}}}}var o=function(e,t,n){e.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:t,cancelable:!0}))},a=function(e){var t=document.getElementById(e.resultsList.idName);t&&(t.remove(),e.inputField.removeAttribute("aria-activedescendant"),e.inputField.setAttribute("aria-expanded",!1),o(e.inputField,null,"close"))},l=function(e,t,n){var r=document.getElementById(e.resultsList.idName);if(r?r.innerHTML="":r=function(e){var t=document.createElement(e.resultsList.element);return t.setAttribute("id",e.resultsList.idName),t.setAttribute("class",e.resultsList.className),t.setAttribute("role","listbox"),e.resultsList.container&&e.resultsList.container(t),("string"==typeof e.resultsList.destination?document.querySelector(e.resultsList.destination):e.resultsList.destination()).insertAdjacentElement(e.resultsList.position,t),t}(e),e.inputField.setAttribute("aria-expanded",!0),n.length)for(var s=function(s){var o=t.results[s],a=function(e,t,n){var i=document.createElement(n.resultItem.element);return i.setAttribute("id","".concat(n.resultItem.idName,"_").concat(t)),i.setAttribute("class",n.resultItem.className),i.setAttribute("role","option"),i.innerHTML=e.match,n.resultItem.content&&n.resultItem.content(e,i),i}(o,s,e);a.addEventListener("click",(function(r){var a={event:r,matches:n,input:t.input,query:t.query,results:t.results,selection:i(i({},o),{},{index:s})};e.onSelection&&e.onSelection(a)})),r.appendChild(a)},o=0;o=t.length&&(n=0),n<0&&(n=t.length-1),t[n].setAttribute("aria-selected","true"),e.resultItem.selected.className&&t[n].classList.add(e.resultItem.selected.className)},l=e.resultsList.navigation||function(t){var i=document.getElementById(e.resultsList.idName);if(i)switch(i=i.getElementsByTagName(e.resultItem.element),t.keyCode){case 27:e.inputField.value="",a(e);break;case 40:r(t,i,!0);break;case 38:r(t,i,!1);break;case 13:t.preventDefault(),n>-1&&(i[n].click(),a(e))}else e.inputField.removeEventListener(u,l)};e.inputField.autoCompleteNavigate&&e.inputField.removeEventListener(u,e.inputField.autoCompleteNavigate),e.inputField.autoCompleteNavigate=l,e.inputField.addEventListener(u,l)},d=function(e,t){for(var n=[],i=function(i){var r=e.data.store[i],o=function(s){var o=(s?r[s]:r).toString();if(o){var a="function"==typeof e.searchEngine?e.searchEngine(t,o):function(e,t,n){var i=n.diacritics?t.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").normalize("NFC"):t.toLowerCase();if("loose"===n.searchEngine){e=e.replace(/ /g,"");for(var r=[],s=0,o=0;o').concat(a,""):a,s++),r.push(a)}if(s===e.length)return r.join("")}else if(i.includes(e)){var l=new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"),"i");return e=l.exec(t),n.resultItem.highlight.render?t.replace(e,'').concat(e,"")):t}}(t,o,e);a&&s?n.push({key:s,index:i,match:a,value:r}):a&&!s&&n.push({index:i,match:a,value:r})}};if(e.data.key){var a,l=s(e.data.key);try{for(l.s();!(a=l.n()).done;)o(a.value)}catch(e){l.e(e)}finally{l.f()}}else o()},r=0;r=e.threshold&&n.replace(/ /g,"").length}(t,e,s)?t.dataStore().then((function(e){try{return t.start(r,s),c.call(t)}catch(e){return i(e)}}),i):(a(t),c.call(t));function c(){return n()}}))}},{key:"init",value:function(){var e,t,n,i,r=this;(e=this).inputField.setAttribute("role","combobox"),e.inputField.setAttribute("aria-haspopup",!0),e.inputField.setAttribute("aria-expanded",!1),e.inputField.setAttribute("aria-controls",e.resultsList.idName),e.inputField.setAttribute("aria-autocomplete","both"),this.placeHolder&&this.inputField.setAttribute("placeholder",this.placeHolder),this.hook=(t=function(e){r.compose(e)},n=this.debounce,function(){var e=this,r=arguments;clearTimeout(i),i=setTimeout((function(){return t.apply(e,r)}),n)}),this.trigger.event.forEach((function(e){r.inputField.removeEventListener(e,r.hook),r.inputField.addEventListener(e,r.hook)})),o(this.inputField,null,"init")}},{key:"preInit",value:function(){var e=this;new MutationObserver((function(t,n){var i,r=s(t);try{for(r.s();!(i=r.n()).done;)i.value,e.inputField&&(n.disconnect(),e.init())}catch(e){r.e(e)}finally{r.f()}})).observe(document,{childList:!0,subtree:!0})}},{key:"unInit",value:function(){this.inputField.removeEventListener("input",this.hook),o(this.inputField,null,"unInit")}}])&&e(n.prototype,i),r&&e(n,r),t}()},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).autoComplete=t(); diff --git a/dist/js/autoComplete.min.js.gz b/dist/js/autoComplete.min.js.gz index bbcbff0..d323415 100644 Binary files a/dist/js/autoComplete.min.js.gz and b/dist/js/autoComplete.min.js.gz differ diff --git a/docs/demo/index.html b/docs/demo/index.html index f214bec..78a24f3 100644 --- a/docs/demo/index.html +++ b/docs/demo/index.html @@ -151,7 +151,7 @@

mode

- + diff --git a/docs/index.html b/docs/index.html index beb3490..b01c3a1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -192,7 +192,7 @@ mustache: { data: ["../package.json", { minVersion: "9.0", - version: "9.0.0" + version: "9.0.1" }] } } @@ -206,7 +206,7 @@ - + \ No newline at end of file diff --git a/docs/release-notes.md b/docs/release-notes.md index e6c8e25..410c4ae 100644 --- a/docs/release-notes.md +++ b/docs/release-notes.md @@ -34,7 +34,11 @@ For more information on semantic versioning, please visit . *** -### v9.0.0 ✨ +### v9.0.1 ✨ + - 🔧 Fixed: `resultItem.idName` issue + - 🔝 Updated: [`Tab`](https://adamsilver.io/blog/building-an-accessible-autocomplete-control/#composite-controls-should-have-a-single-tab-stop) button behavior (Thanks 👍 @ronmichael @codyjames) #175 #202 + +### v9.0.0 >
This version has breaking changes, kindly check the list - 🔧 Fixed: `esc` button not working with `noResults` in some cases (Thanks 👍 @sunshineplan) #157 - ➕ Added: `selection` & `highlight` custom `className` API methods (Thanks 👍 @jerrykan) #184 diff --git a/docs/sitemap.xml b/docs/sitemap.xml index 0b14d0b..8bb509f 100644 --- a/docs/sitemap.xml +++ b/docs/sitemap.xml @@ -2,46 +2,46 @@ https://tarekraafat.github.io/autoComplete.js/ -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/getting-started -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/installation -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/usage -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/configuration -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/playground -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/plugins -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/browsers-support -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/support -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/release-notes -2021-04-12 +2021-04-16 https://tarekraafat.github.io/autoComplete.js/#/contributions -2021-04-12 +2021-04-16 \ No newline at end of file diff --git a/package.json b/package.json index ee00ee0..fb53c15 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tarekraafat/autocomplete.js", - "version": "9.0.0", + "version": "9.0.1", "description": "Simple autocomplete pure vanilla Javascript library.", "keywords": [ "simple", diff --git a/src/autoComplete.js b/src/autoComplete.js index 723626d..34c5499 100644 --- a/src/autoComplete.js +++ b/src/autoComplete.js @@ -122,7 +122,7 @@ export default class autoComplete { * and closes list if clicked outside the list and inputField * @listens {click} Listens to all `click` events on the document **/ - document.addEventListener("click", (event) => closeList(this, event.target)); + document.addEventListener("focusout", () => closeList(this)); } async dataStore() { diff --git a/src/components/List.js b/src/components/List.js index 27d9e8f..a46a185 100644 --- a/src/components/List.js +++ b/src/components/List.js @@ -11,7 +11,6 @@ export default (config) => { list.setAttribute("id", config.resultsList.idName); list.setAttribute("class", config.resultsList.className); list.setAttribute("role", "listbox"); - list.setAttribute("tabindex", "-1"); // If custom container set pass the list if (config.resultsList.container) config.resultsList.container(list); // List rendering destination diff --git a/src/controllers/listController.js b/src/controllers/listController.js index 215fe32..89bb1df 100644 --- a/src/controllers/listController.js +++ b/src/controllers/listController.js @@ -3,16 +3,15 @@ import createItem from "../components/Item"; import eventEmitter from "../utils/eventEmitter"; /** - * Close all open lists + * Close open list * * @param {Object} config - autoComplete configurations - * @param {Element} element - Current selected element * */ -const closeList = (config, element) => { +const closeList = (config) => { // Get autoComplete list const list = document.getElementById(config.resultsList.idName); - if (list && element !== config.inputField) { + if (list) { // Remove open list list.remove(); // Remove active descendant diff --git a/src/controllers/navigationController.js b/src/controllers/navigationController.js index 9a42e64..fe75a4d 100644 --- a/src/controllers/navigationController.js +++ b/src/controllers/navigationController.js @@ -102,17 +102,18 @@ const navigate = (config, dataFeedback) => { switch (event.keyCode) { case 27: // If the ESC key is pressed - // Clear Input value + // Clears Input field config.inputField.value = ""; // Closes open list closeList(config); break; - case 9: case 40: + // If the DOWN key is pressed // Update list items state update(event, list, true); break; case 38: + // If the UP key is pressed // Update list items state update(event, list, false); break;