Focus on selectedItemByArrows

Add itemsLimit prop Fix lint error "You should not mix 'v-for' with 'v-if'"
iliyaZelenko · Mar 5, 2019 · 7f30c6e · 7f30c6e
1 parent 2496190
commit 7f30c6e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/component.vue b/src/component.vue
@@ -75,7 +75,9 @@
               'IZ-select__item': true,
               'IZ-select__item--selected': isItemSelected(item)
             }"
+            tabindex="-1"
             @click="onClickSelectItem(item)"
+            :ref="'items'"
           >
             <slot
               :item="item"
@@ -148,8 +150,7 @@ export default {
     focused: false,
     selectedItem: null,
     selectedItemByArrows: null,
-    // TODO create a prop
-    itemsLimit: 20,
+    // used only in the "search" computed (setter + getter)
     searchData: ''
   }),
   computed,

diff --git a/src/eventsListeners.js b/src/eventsListeners.js
@@ -34,6 +34,9 @@ export default {
       this.fireSelectEvent(this.selectedItem)
     }
 
+    let selectedElement = this.$refs.items[this.arrowsIndex]
+    if (selectedElement) selectedElement.focus()
+
     e.preventDefault()
   },
   onEnter () {

diff --git a/src/props.js b/src/props.js
@@ -10,6 +10,11 @@ export default {
     required: true,
     note: 'array of suggestions (data fetched from backend, etc)'
   },
+  itemsLimit: {
+    type: Number,
+    default: 20,
+    note: 'property in item for text'
+  },
   itemText: {
     type: String,
     default: null, // 'text',