select option by pressing enter

Author: ibnujakaria

src/components/DropdownSelect.js

@@ -6,7 +6,6 @@ class DropdownSelect {
     this.$dropdownSelect = null
     this.$input = null
     this.$optionItems = []
-    this.keyword = null
 
     this._buildDropdownSelect()
     this._buildSearchInput()
@@ -22,8 +21,12 @@ class DropdownSelect {
       'shadow'
     )
 
-    this.$container.$root.$store.on('keywordChange', (keyword) => {
-      this.keyword = keyword
+    this.$container.$root.$store.on('keywordChange', () => {
+      this._buildOptionItems()
+      this._rerenderOptionsItems()
+    })
+
+    this.$container.$root.$store.on('selectedItemsChange', () => {
       this._buildOptionItems()
       this._rerenderOptionsItems()
     })
@@ -135,13 +138,7 @@ class DropdownSelect {
   }
 
   get filteredItems () {
-    return this.$container.$root.$store.items.filter(item => {
-      if (this.keyword) {
-        return item.label.toLowerCase().includes(this.keyword.toLowerCase())
-      }
-
-      return true
-    })
+    return this.$container.$root.$store.filteredItems
   }
 }
 

src/components/SearchInput.js

@@ -35,10 +35,10 @@ class SearchInput {
   }
 
   _registerEventListeners () {
-    // prevent default action if arrow up and down is pressed
+    // prevent default action for some key when pressed
     // navigating between options
     this._input.addEventListener('keydown', (e) => {
-      if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {
+      if (e.code === 'ArrowUp' || e.code === 'ArrowDown' || e.code === 'Enter') {
         e.preventDefault()
 
         if (e.code === 'ArrowUp') {
@@ -62,6 +62,32 @@ class SearchInput {
     this._input.addEventListener('keyup', (e) => {
       if (e.code !== 'ArrowUp' && e.code !== 'ArrowDown') {
         this.$root.$store.keyword = this._input.value
+      } 
+      
+      // toggle select option
+      if (e.code === 'Enter') {
+        if (this.$root.$store.hoveredItemIndex !== null) {
+          let selectedItem = this.$root.$store.filteredItems[this.$root.$store.hoveredItemIndex]
+          let selectedItems = this.$root.$store.selectedItems
+          let index = selectedItems.findIndex(_selectedItem => _selectedItem.value === selectedItem.value)
+
+          if (index > -1) {
+            selectedItems.splice(index, 1)
+          } else {
+            if (this.$root.$store.isMultiple) {
+              selectedItems.push(selectedItem)
+            } else {
+              selectedItems = [selectedItem]
+
+              // close the dropdown because it is not `<select multiple>`
+              this.$root.$store.isOpened = false
+            }
+          }
+
+          this.$root.$store.selectedItems = selectedItems
+          
+          console.log(selectedItem, { index })
+        }
       }
     })
   }

src/store/Store.js

@@ -28,6 +28,16 @@ class Store extends EventEmitter {
     this.emit('itemsChange', items)
   }
 
+  get filteredItems () {
+    return this._items.filter(item => {
+      if (this._keyword) {
+        return item.label.toLowerCase().includes(this._keyword.toLowerCase())
+      }
+
+      return true
+    })
+  }
+
   get selectedItems () {
     return this._selectedItems || []
   }
@@ -47,9 +57,11 @@ class Store extends EventEmitter {
   }
 
   set keyword (keyword) {
-    this._keyword = keyword
-    this._hoveredItemIndex = null
-    this.emit('keywordChange', keyword)
+    if (keyword && this._keyword !== keyword) {
+      this._keyword = keyword
+      this._hoveredItemIndex = null
+      this.emit('keywordChange', keyword)
+    }
   }
 
   /**