improve focus management + clear ui

lekoala · Aug 19, 2021 · 3c18ad3 · 3c18ad3
1 parent f0be1d8
commit 3c18ad3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/demo.html b/demo.html
@@ -37,6 +37,18 @@ <h1>Demo</h1>
             <div class="invalid-feedback">Please select a valid tag.</div>
           </div>
         </div>
+        <div class="row mb-3 g-3">
+          <div class="col-4">
+            <label for="validationTagsThreshold" class="form-label">Tags (allow clear + 0 threshold)</label>
+            <select class="form-select" id="validationTagsThreshold" name="tagsClearThreshold[]" multiple data-allow-clear="true" data-suggestions-threshold="0">
+              <option selected disabled hidden value="">Choose a tag...</option>
+              <option value="1" selected="selected">Apple</option>
+              <option value="2">Banana</option>
+              <option value="3">Orange</option>
+            </select>
+            <div class="invalid-feedback">Please select a valid tag.</div>
+          </div>
+        </div>
         <div class="row mb-3 g-3">
           <div class="col-4">
             <label for="validationTagsShow" class="form-label">Tags (show all)</label>

diff --git a/tags.js b/tags.js
@@ -26,6 +26,7 @@ class Tags {
     this.allowNew = selectElement.dataset.allowNew ? true : false;
     this.showAllSuggestions = selectElement.dataset.showAllSuggestions ? true : false;
     this.allowClear = selectElement.dataset.allowClear ? true : false;
+    this.suggestionsThreshold = selectElement.dataset.suggestionsThreshold ? parseInt(selectElement.dataset.suggestionsThreshold) : 1;
     this.keyboardNavigation = false;
 
     // Create elements
@@ -116,6 +117,7 @@ class Tags {
   }
 
   configureSearchInput() {
+    let self = this;
     this.searchInput.type = "text";
     this.searchInput.autocomplete = false;
     this.searchInput.style.border = 0;
@@ -126,12 +128,22 @@ class Tags {
 
     this.searchInput.addEventListener("input", (event) => {
       this.adjustWidth();
-      if (this.searchInput.value.length >= 1) {
+      if (this.searchInput.value.length >= this.suggestionsThreshold) {
         this.showSuggestions();
       } else {
         this.hideSuggestions();
       }
     });
+    this.searchInput.addEventListener("focus", (event) => {
+      if (this.searchInput.value.length >= this.suggestionsThreshold) {
+        this.showSuggestions();
+      }
+    });
+    this.searchInput.addEventListener("focusout", (event) => {
+      setTimeout(function () {
+        self.hideSuggestions();
+      }, 100);
+    });
     // keypress doesn't send arrow keys
     this.searchInput.addEventListener("keydown", (event) => {
       // Keycode reference : https://css-tricks.com/snippets/javascript/javascript-keycodes/
@@ -342,7 +354,7 @@ class Tags {
 
       // Check search length since we can trigger dropdown with arrow
       let isMatched = search.length === 0 || text.indexOf(search) !== -1;
-      if (this.showAllSuggestions || isMatched) {
+      if (this.showAllSuggestions || this.suggestionsThreshold === 0 || isMatched) {
         item.style.display = "list-item";
         found = true;
         if (!firstItem && isMatched) {
@@ -421,18 +433,16 @@ class Tags {
     span.classList.add("badge");
     span.classList.add("bg-primary");
     span.classList.add("me-2");
-    span.classList.add("position-relative");
     span.setAttribute(VALUE_ATTRIBUTE, value);
 
     if (this.allowClear) {
-      html += '<span class="position-absolute top-50 end-0 translate-middle" style="font-size:0.65em"><button type="button" class="btn-close btn-close-white"></button></span>';
-      span.classList.add("pe-4");
+      html = '<span class="me-2" style="font-size:0.65em"><button type="button" class="btn-close btn-close-white"></button></span>' + html;
     }
 
     span.innerHTML = html;
     this.containerElement.insertBefore(span, this.searchInput);
 
-    if(this.allowClear) {
+    if (this.allowClear) {
       span.querySelector("button").addEventListener("click", (event) => {
         this.removeItem(value);
       });