v9.0.1 => Release Notes for details

README.md

@@ -47,13 +47,13 @@ autoComplete.js is a simple pure vanilla Javascript library that's progressively
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].0/dist/js/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].1/dist/js/autoComplete.min.js"></script>
 ```
 
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].0/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].1/dist/css/autoComplete.min.css">
 ```
 #### Package Manager
 

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);
         });
       }
     }, {

docs/demo/index.html

@@ -151,7 +151,7 @@ <h4>mode</h4>
 			</div>
 		</footer>
 	</div>
-	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].0/dist/js/autoComplete.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].1/dist/js/autoComplete.min.js"></script>
 	<script src="./js/index.js"></script>
 </body>
 

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 @@
     <script src="//unpkg.com/docsify-copy-code"></script>
     <script src="//cdn.jsdelivr.net/npm/codeblock-iframe@latest/dist/index.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-codeblock-iframe@latest/dist/index.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].0/dist/js/autoComplete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected].1/dist/js/autoComplete.min.js"></script>
 </body>
 
 </html>

docs/release-notes.md

@@ -34,7 +34,11 @@ For more information on semantic versioning, please visit <http://semver.org/>.
 
 ***
 
-### 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
   > <div class="ps-icon ps-icon-important"></div> 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

docs/sitemap.xml

@@ -2,46 +2,46 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/getting-started</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/installation</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/usage</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/configuration</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/playground</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/plugins</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/browsers-support</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/support</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/release-notes</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 <url>
 <loc>https://tarekraafat.github.io/autoComplete.js/#/contributions</loc>
-<lastmod>2021-04-12</lastmod>
+<lastmod>2021-04-16</lastmod>
 </url>
 </urlset>

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",

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() {

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

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

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;