Merge pull request #341 from haugen86/feature/make-select-keypress-aware

mkocansey · Sep 13, 2024 · 1d27f9c · 1d27f9c
2 parents 234c21d + 97a714d
commit 1d27f9c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/public/js/select.js b/public/js/select.js
@@ -31,6 +31,7 @@ class BladewindSelect {
         this.maxSelection = -1;
         this.canClear = (!this.required && !this.isMultiple);
         this.enabled = true;
+        this.selectedItem = null;
     }
 
     activate = (options = {}) => {
@@ -42,12 +43,48 @@ class BladewindSelect {
             this.search();
             this.manualModePreSelection();
             this.selectItem();
+            this.enableKeyboardNavigation();
         } else {
             this.selectItem();
             this.enabled = false;
         }
     }
 
+    enableKeyboardNavigation = () => {
+        dom_el(this.rootElement).addEventListener('keydown', (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                unhide(this.itemsContainer);
+                dom_el(this.searchInput).focus()
+            }
+            if (e.key === "Tab") {
+                hide(this.itemsContainer);
+            }
+
+            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                e.preventDefault();
+                let els = [...dom_els(this.selectItems)].filter((el) => {
+                    if (el.classList.contains('hidden')) {
+                        return false;
+                    }
+
+                    return el.getAttribute('data-unselectable') === null;
+                });
+
+                if (!this.selectedItem) {
+                    this.selectedItem = e.key === 'ArrowDown' ? els[0] : els[els.length - 1];
+                } else {
+                    let idx = els.indexOf(this.selectedItem);
+
+                    this.selectedItem = e.key === 'ArrowDown' ? els[idx + 1] : els[idx - 1];
+                }
+                this.setValue(this.selectedItem);
+                this.callUserFunction(this.selectedItem);
+            }
+        });
+    }
+
+
     clearable = () => {
         this.canClear = true;
     }

diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
@@ -165,6 +165,7 @@
     }
 </style>
 <div class="relative bw-select bw-select-{{$input_name}} @if($add_clearing) mb-3 @endif"
+     role="combobox"
      data-multiple="{{$multiple}}" data-required="{{$required?'true':'false'}}"
      data-type="{{ $data !== 'manual' ? 'dynamic' : 'manual'}}"
      @if(!empty($filter)) data-filter="{{ $filter}}" @endif