(release) 1.1.1: fix wrong country when you click on list

LouisMazel · Jan 3, 2020 · cc098a3 · cc098a3
1 parent 0a6faa3
commit cc098a3
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 34 deletions.
diff --git a/docs/css/app.0bb41329.css → docs/css/app.aa76fdd1.css b/docs/css/app.0bb41329.css → docs/css/app.aa76fdd1.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.png><title>vue-phone-number-input</title><link href=css/app.0bb41329.css rel=preload as=style><link href=js/app.269997c9.js rel=preload as=script><link href=js/chunk-vendors.c21b0c38.js rel=preload as=script><link href=css/app.0bb41329.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-phone-number-input doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.c21b0c38.js></script><script src=js/app.269997c9.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.png><title>vue-phone-number-input</title><link href=css/app.aa76fdd1.css rel=preload as=style><link href=js/app.edb3a8e9.js rel=preload as=script><link href=js/chunk-vendors.f2b96f39.js rel=preload as=script><link href=css/app.aa76fdd1.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-phone-number-input doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.f2b96f39.js></script><script src=js/app.edb3a8e9.js></script></body></html>
diff --git a/docs/js/app.269997c9.js b/docs/js/app.269997c9.js
diff --git a/docs/js/app.269997c9.js.map b/docs/js/app.269997c9.js.map
diff --git a/docs/js/app.edb3a8e9.js b/docs/js/app.edb3a8e9.js
diff --git a/docs/js/app.edb3a8e9.js.map b/docs/js/app.edb3a8e9.js.map
diff --git a/docs/js/chunk-vendors.c21b0c38.js b/docs/js/chunk-vendors.c21b0c38.js
diff --git a/docs/js/chunk-vendors.c21b0c38.js.map b/docs/js/chunk-vendors.c21b0c38.js.map
diff --git a/docs/js/chunk-vendors.f2b96f39.js b/docs/js/chunk-vendors.f2b96f39.js
diff --git a/docs/js/chunk-vendors.f2b96f39.js.map b/docs/js/chunk-vendors.f2b96f39.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-phone-number-input",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A phone number input made with Vue JS && libphonenumber-js",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "scripts": {
@@ -28,7 +28,7 @@
     "libphonenumber-js": "^1.7.26",
     "style-helpers": "^1.0.1",
     "vue": "^2.6.10",
-    "vue-virtual-scroll-list": "^1.4.4"
+    "vue-virtual-scroller": "^1.0.0-rc.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.3.0",

diff --git a/src/VuePhoneNumberInput/CountrySelector/index.vue b/src/VuePhoneNumberInput/CountrySelector/index.vue
@@ -76,14 +76,14 @@
         :class="{ 'has-calling-code': showCodeOnList }"
         :style="[radiusStyle, listHeight]"
       >
-        <VirtualList
-          :size="countriesHeight"
-          :remain="7"
-          :start="indexItemToShow"
+        <RecycleScroller
+          v-slot="{ item }"
+          :items="countriesSorted"
+          :item-size="1"
+          key-field="iso2"
         >
           <button
-            v-for="item in countriesSorted"
-            :key="item.code"
+            :key="`item-${item.code}`"
             :class="[
               { 'selected': value === item.iso2 },
               { 'keyboard-selected': value !== item.iso2 && tmpValue === item.iso2 }
@@ -110,21 +110,22 @@
               {{ item.name }}
             </div>
           </button>
-        </VirtualList>
+        </RecycleScroller>
       </div>
     </Transition>
   </div>
 </template>
 
 <script>
   import { getCountryCallingCode } from 'libphonenumber-js'
-  import VirtualList from 'vue-virtual-scroll-list'
   import StylesHandler from '@/VuePhoneNumberInput/mixins/StylesHandler'
 
+  import { RecycleScroller } from 'vue-virtual-scroller'
+
   export default {
     name: 'CountrySelector',
     components: {
-      VirtualList
+      RecycleScroller
     },
     mixins: [StylesHandler],
     props: {
@@ -164,8 +165,8 @@
       },
       listHeight () {
         return {
-          height: `${this.countriesHeight * 7}px`,
-          maxHeight: `${this.countriesHeight * 7}px`
+          height: `${(this.countriesHeight + 1) * 7}px`,
+          maxHeight: `${(this.countriesHeight + 1) * 7}px`
         }
       },
       countriesList () {
@@ -230,7 +231,8 @@
       },
       scrollToSelectedOnFocus (arrayIndex) {
         this.$nextTick(() => {
-          this.indexItemToShow = arrayIndex - 3
+          // this.indexItemToShow = arrayIndex - 3
+          this.$refs.countriesList.scrollTop = arrayIndex * (this.countriesHeight + 1) - ((this.countriesHeight + 1) * 3)
         })
       },
       keyboardNav (e) {
@@ -408,7 +410,7 @@
           color: $muted-color;
         }
 
-        &:hover,
+        &.hover,
         &.keyboard-selected {
           background-color: $hover-color;
         }