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)