Merge branch 'master' of github.com:serebrov/emoji-mart-vue

serebrov · Jan 31, 2021 · a39dee4 · a39dee4
2 parents 325a2d6 + a459111
commit a39dee4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/spec/picker-spec.js b/spec/picker-spec.js
@@ -42,10 +42,7 @@ describe('Picker', () => {
   })
 
   it('renders 10 categories', () => {
-    // Due to the virtual scroller, not all the categories
-    // are rendered at once
     let categories = picker.findAll(Category)
-    // StaticPicker change (8 -> 10)
     expect(categories.length).toBe(11)
     // Hidden category with search results
     expect(categories.at(0).vm.name).toBe('Search')
@@ -57,7 +54,6 @@ describe('Picker', () => {
     expect(categories.at(6).vm.name).toBe('Activities')
     expect(categories.at(7).vm.name).toBe('Travel & Places')
     expect(categories.at(8).vm.name).toBe('Objects')
-    // StaticPicker change (Symbols and Flags)
     expect(categories.at(9).vm.name).toBe('Symbols')
     expect(categories.at(10).vm.name).toBe('Flags')
   })
@@ -207,21 +203,31 @@ describe('anchors', () => {
     ])
   })
 
-  it('can be clicked to scroll to the category', () => {
+  it('can be clicked to scroll to the category', async () => {
     let anchors = picker.find(Anchors)
 
     let anchorsCategories = anchors.findAll('span.emoji-mart-anchor')
     let symbols = anchorsCategories.at(8)
     expect(symbols.element.attributes['data-title'].value).toBe('Symbols')
 
+    // The `recent` category is selected initially.
+    expect(picker.vm.activeCategory.id).toBe('recent')
+    expect(anchors.vm.activeCategory.id).toBe('recent')
+
     symbols.trigger('click')
     let events = anchors.emitted().click
     expect(events.length).toBe(1)
+
     let category = events[0][0]
     expect(category.id).toBe('symbols')
     expect(category.name).toBe('Symbols')
 
-    // StaticPicker change - the check below fails (although works in demo app)
+    await picker.vm.$nextTick()
+
+    // Picker change - the check below fails (although works in demo app)
+    // scrollTop if 0 for all categories and activeCategory is changed in the
+    // onScroll handler, need to find a way to thes this.
+    // expect(picker.vm.activeCategory.id).toBe('symbols')
     // expect(anchors.vm.activeCategory.id).toBe('symbols')
   })
 })

diff --git a/src/components/Picker.vue b/src/components/Picker.vue
@@ -197,11 +197,11 @@ export default {
     },
     onScrollPaint() {
       this.waitingForPaint = false
-      let scrollTop = this.$refs.scroll.scrollTop,
-        activeCategory = this.filteredCategories[0]
+      let scrollTop = this.$refs.scroll.scrollTop
+      let activeCategory = this.filteredCategories[0]
       for (let i = 0, l = this.filteredCategories.length; i < l; i++) {
-        let category = this.filteredCategories[i],
-          component = this.$refs['categories_' + i]
+        let category = this.filteredCategories[i]
+        let component = this.getCategoryComponent(i)
         // The `-50` offset switches active category (selected in the
         // anchors bar) a bit eariler, before it actually reaches the top.
         if (component && component.$el.offsetTop - 50 > scrollTop) {
@@ -216,17 +216,17 @@ export default {
         // No categories are shown when search is active.
         return
       }
-      let i = this.filteredCategories.indexOf(category),
-        component = this.$refs['categories_' + i],
-        scrollToComponent = () => {
-          if (component) {
-            let top = component.$el.offsetTop
-            if (category.first) {
-              top = 0
-            }
-            this.$refs.scroll.scrollTop = top
+      let i = this.filteredCategories.indexOf(category)
+      let component = this.getCategoryComponent(i)
+      let scrollToComponent = () => {
+        if (component) {
+          let top = component.$el.offsetTop
+          if (category.first) {
+            top = 0
           }
+          this.$refs.scroll.scrollTop = top
         }
+      }
       if (this.infiniteScroll) {
         scrollToComponent()
       } else {
@@ -253,6 +253,15 @@ export default {
 
       this.$emit('skin-change', skin)
     },
+    getCategoryComponent(index) {
+      let component = this.$refs['categories_' + index]
+      if ('0' in component) {
+        // Vue 2 has $refs under v-for as an array.
+        return component['0']
+      }
+      // Vue 3 does not support $refs as array.
+      return component
+    },
   },
   components: {
     Anchors,