From 28eb22d8ff1d463af24aebb0c9be2209a311c072 Mon Sep 17 00:00:00 2001
From: Borys Serebrov <serebrov@gmail.com>
Date: Wed, 18 Dec 2024 19:15:17 -0500
Subject: [PATCH] Fix category switch to clear search

Related to #136

Clear the search when switching categories in the emoji picker.

Generated with copilot, need to test locally and review test more thoroughly, make sure it works and verifies the fix.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/serebrov/emoji-mart-vue/issues/136?shareId=XXXX-XXXX-XXXX-XXXX).
---
 spec/picker-spec.js       | 31 +++++++++++++++++++++++++++++++
 src/components/Picker.vue |  4 ++++
 2 files changed, 35 insertions(+)

diff --git a/spec/picker-spec.js b/spec/picker-spec.js
index e22fa2d..1bc365d 100644
--- a/spec/picker-spec.js
+++ b/spec/picker-spec.js
@@ -85,6 +85,37 @@ describe('Picker', () => {
       })
     })
   })
+
+  it('clears search when switching categories', (done) => {
+    let search = picker.findComponent(Search)
+    let input = search.find('input')
+    input.element.value = '+1'
+    input.trigger('input')
+
+    picker.vm.$nextTick(() => {
+      let categories = picker.findAllComponents(Category)
+      let searchCategory = categories.at(0)
+      expect(searchCategory.vm.id).toBe('search')
+
+      let anchors = picker.findComponent(Anchors)
+      let anchorsCategories = anchors.findAll('.emoji-mart-anchor')
+      let symbols = anchorsCategories.at(8)
+      expect(symbols.element.attributes['data-title'].value).toBe('Symbols')
+      symbols.trigger('click')
+
+      picker.vm.$nextTick(() => {
+        let events = anchors.emitted().click
+        let category = events[0][0]
+        expect(category.id).toBe('symbols')
+        expect(anchors.vm.activeCategory.id).toBe('symbols')
+
+        // Verify that the search input is cleared
+        expect(search.vm.value).toBe('')
+
+        done()
+      })
+    })
+  })
 })
 
 describe('categories', () => {
diff --git a/src/components/Picker.vue b/src/components/Picker.vue
index a9040e2..831b7ee 100644
--- a/src/components/Picker.vue
+++ b/src/components/Picker.vue
@@ -212,6 +212,10 @@ export default {
     },
     onAnchorClick(category) {
       this.view.onAnchorClick(category)
+      // Clear the search when switching categories
+      // otherwise categories switch does not work.
+      // See #136.
+      this.$refs.search.clear()
     },
     onSearch(value) {
       this.view.onSearch(value)