From 7f30c6e188a267521bc6dcbbf83ad1218a25f04c Mon Sep 17 00:00:00 2001
From: Marios Tsigkas <mariosh346@gmail.com>
Date: Tue, 5 Mar 2019 14:56:05 +0200
Subject: [PATCH 1/2] Focus on selectedItemByArrows Add itemsLimit prop Fix
 lint error "You should not mix 'v-for' with 'v-if'"

---
 src/component.vue      | 5 +++--
 src/eventsListeners.js | 3 +++
 src/props.js           | 5 +++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/component.vue b/src/component.vue
index 9d34e4a5..b618b0a7 100644
--- 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
index e610930d..6d8e52c8 100644
--- 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
index 08da7f49..f8703f94 100644
--- 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',

From 47d1039ee7f1676f0b2ef9aa1eabbaaa587bfb5b Mon Sep 17 00:00:00 2001
From: Marios Tsigkas <mariosh346@gmail.com>
Date: Tue, 5 Mar 2019 15:01:37 +0200
Subject: [PATCH 2/2] Fix lint error "You should not mix 'v-for' with 'v-if'"

---
 src/component.vue | 5 ++---
 src/props.js      | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/component.vue b/src/component.vue
index b618b0a7..7b50c583 100644
--- a/src/component.vue
+++ b/src/component.vue
@@ -69,7 +69,6 @@
 
           <div
             v-for="(item, i) in itemsComputed"
-            v-if="i < itemsLimit"
             :key="'IZ-item-' + i"
             :class="{
               'IZ-select__item': true,
@@ -77,11 +76,12 @@
             }"
             tabindex="-1"
             @click="onClickSelectItem(item)"
-            :ref="'items'"
+            ref="items"
           >
             <slot
               :item="item"
               name="item"
+              v-if="i < itemsLimit"
             >
               <span>
                 {{ getItemText(item) }}
@@ -150,7 +150,6 @@ export default {
     focused: false,
     selectedItem: null,
     selectedItemByArrows: null,
-    // used only in the "search" computed (setter + getter)
     searchData: ''
   }),
   computed,
diff --git a/src/props.js b/src/props.js
index f8703f94..49dbd3a4 100644
--- a/src/props.js
+++ b/src/props.js
@@ -13,7 +13,7 @@ export default {
   itemsLimit: {
     type: Number,
     default: 20,
-    note: 'property in item for text'
+    note: 'items limit'
   },
   itemText: {
     type: String,