fix(component): fix tab navigation

fix #98

gh-pages-src/App.vue

@@ -141,7 +141,7 @@
                 href="https://github.com/iliyaZelenko/vue-cool-select"
                 target="_blank"
                 class="ml-2"
-                round
+                rounded
               >
                 Visit github
               </v-btn>

gh-pages-src/pages/dev/Example5.vue

@@ -39,7 +39,6 @@
         :readonly="readonly"
         :disable-search="disableSearch"
         placeholder="Select name"
-        @blur="validate"
       />
 
       <br>
@@ -72,9 +71,14 @@ export default {
     items: '[{"first_name":"one"}, {"first_name":"two"}, {"first_name":"three"}, {"first_name":"four"}, {"first_name":"five"}]',
     errorMessage: null
   }),
+  watch: {
+    selected () {
+      this.validate()
+    }
+  },
   methods: {
     validate () {
-      this.errorMessage = !this.selected ? 'This is required field!' : null
+      this.errorMessage = this.selected ? null : 'This is required field!'
     }
   }
 }

src/component.vue

@@ -1,13 +1,15 @@
 <template>
+  <!---->
   <div
     ref="IZ-select"
+    :tabindex="disableSearch ? 1 : -1"
     class="IZ-select"
-    tabindex="0"
     @keydown.up="onSelectByArrow"
     @keydown.down="onSelectByArrow"
     @keydown.enter="onEnter"
     @keydown.tab.esc="setBlured"
     @mousedown="onClick"
+    @focus="onFocus"
   >
     <div
       ref="IZ-select__input"
@@ -37,12 +39,14 @@
         :class="inputForTextClass"
         :disabled="disableSearch || disabled"
         :readonly="readonly"
+        :tabindex="disableSearch ? -1 : 1"
         type="text"
         role="combobox"
         autocomplete="off"
         @keyup="onSearchKeyUp"
         @keydown="onSearchKeyDown"
         @input="onSearch"
+        @focus="onFocus"
       >
     </div>
 

src/computed.js

@@ -43,14 +43,16 @@ export default {
     return window.innerWidth <= 900 && window.innerHeight <= 900
   },
   menuDynamicStyles () {
-    let obj = {
-      // ширина такая же как и у поля ввода
-      'width': this.$refs['IZ-select__input'].offsetWidth + 'px',
+    const input = this.$refs['IZ-select__input']
+    const obj = {
+      // ширина и смещение слева такие же как и у поля ввода
+      width: input.offsetWidth + 'px',
+      left: input.offsetLeft + 'px',
       'pointer-events': this.hasMenu ? 'auto' : 'none'
     }
 
     if (this.disableSearch) {
-      obj.top = this.$refs['IZ-select__input'].offsetTop + 'px'
+      obj.top = input.offsetTop + 'px'
     }
 
     return obj

src/eventsListeners.js

@@ -1,6 +1,9 @@
 import { scrollIfNeeded } from '~/helpers'
 
 export default {
+  onFocus () {
+    this.setFocused()
+  },
   onSelectByArrow (e) {
     e.preventDefault()
 

src/styles/main.styl

@@ -1,13 +1,14 @@
-.IZ-select *
-  box-sizing: border-box;
+.IZ-select
+  *
+    box-sizing: border-box;
 
 .fade
   &-leave-active
-    position: absolute
+    position: absolute;
 
   &-enter-active, &-leave, &-leave-to
     transition: opacity .2s;
 
   &-enter, &-leave-to
-    opacity: 0
+    opacity: 0;
 

tests/unit/component.spec.js

@@ -383,7 +383,7 @@ describe('MainComponent.vue', () => {
     let styles = wrapper.vm.menuDynamicStyles
 
     expect(
-      !!(styles.width && styles['pointer-events'] && !styles.top)
+      !!(styles.width && styles.left && styles['pointer-events'] && !styles.top)
     ).toBe(true)
 
     wrapper.setProps({
@@ -393,7 +393,7 @@ describe('MainComponent.vue', () => {
     styles = wrapper.vm.menuDynamicStyles
 
     expect(
-      !!(styles.width && styles['pointer-events'] && styles.top)
+      !!(styles.width && styles.left && styles['pointer-events'] && styles.top)
     ).toBe(true)
   })
 })