diff --git a/.all-contributorsrc b/.all-contributorsrc index c265399..c00aadb 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -32,6 +32,17 @@ "example", "test" ] + }, + { + "login": "scottadamsmith", + "name": "Scott Smith", + "avatar_url": "https://avatars3.githubusercontent.com/u/1824850?v=4", + "profile": "https://github.com/scottadamsmith", + "contributions": [ + "bug", + "code", + "test" + ] } ] } diff --git a/README.md b/README.md index 0df92e4..533156e 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][LICENSE] -[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] @@ -385,11 +385,8 @@ getSuggestionValue(suggestion) { Thanks goes to these people ([emoji key][emojis]): - -| [
Darren Jennings](https://darrenjennings.github.io)
[💻](https://github.com/Educents/vue-autosuggest/commits?author=darrenjennings "Code") [📖](https://github.com/Educents/vue-autosuggest/commits?author=darrenjennings "Documentation") [🚇](#infra-darrenjennings "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/Educents/vue-autosuggest/commits?author=darrenjennings "Tests") [🎨](#design-darrenjennings "Design") [💡](#example-darrenjennings "Examples") | [
Evgeniy Kulish](https://github.com/ekulish)
[💻](https://github.com/Educents/vue-autosuggest/commits?author=ekulish "Code") [🎨](#design-ekulish "Design") [💡](#example-ekulish "Examples") [⚠️](https://github.com/Educents/vue-autosuggest/commits?author=ekulish "Tests") | -| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | - - +| [
Darren Jennings](https://darrenjennings.github.io)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Code") [📖](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Documentation") [🚇](#infra-darrenjennings "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Tests") [🎨](#design-darrenjennings "Design") [💡](#example-darrenjennings "Examples") | [
Evgeniy Kulish](https://github.com/ekulish)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish "Code") [🎨](#design-ekulish "Design") [💡](#example-ekulish "Examples") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish "Tests") | [
Scott Smith](https://github.com/scottadamsmith)
[🐛](https://github.com/darrenjennings/vue-autosuggest/issues?q=author%3Ascottadamsmith "Bug reports") [💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Tests") | +| :---: | :---: | :---: | This project follows the [all-contributors][all-contributors] specification. Contributions of any diff --git a/__tests__/autosuggest.test.js b/__tests__/autosuggest.test.js index 24cd52f..798cead 100644 --- a/__tests__/autosuggest.test.js +++ b/__tests__/autosuggest.test.js @@ -197,6 +197,68 @@ describe("Autosuggest", () => { }); }); + it("can interact with results of specific instance when multiple instances exist", async () => { + const multipleAutosuggest = { + components: { + Autosuggest + }, + data () { + return { + autosuggestProps: defaultProps, + automatischsuchen: true + } + }, + render(h) { + return h( + "div", + [ + h( + Autosuggest, + { + props: this.autosuggestProps + } + ), + h( + Autosuggest, + { + props: this.autosuggestProps + } + ) + ] + ); + } + } + const wrapper = mount(multipleAutosuggest, { + attachToDocument: true + }); + + const autosuggestInstances = wrapper.findAll(Autosuggest); + + const autosuggest1 = autosuggestInstances.at(0); + const autosuggest2 = autosuggestInstances.at(1); + const input1 = autosuggest1.find("input"); + const input2 = autosuggest2.find("input"); + + input1.trigger("click"); + input2.trigger("click"); + + expect(autosuggest1.findAll("li.autosuggest__results_item").length).toBe(5); + expect(autosuggest1.findAll("li.autosuggest__results_item").length).toBe(5); + + times(2)(() => { + input2.trigger("keydown.down"); + }); + + expect(autosuggest1.findAll("li.autosuggest__results_item-highlighted").length).toBe(0); + expect(autosuggest2.findAll("li.autosuggest__results_item-highlighted").length).toBe(1); + expect(autosuggest2.findAll("li").at(1).classes()).toContain("autosuggest__results_item-highlighted"); + + input2.trigger("keydown.enter"); + + expect(input1.element.value).toBe(""); + expect(input2.element.value).toBe("friendly chemistry"); + }); + it("can click outside document to trigger close", async () => { const props = Object.assign({}, defaultProps); diff --git a/src/Autosuggest.vue b/src/Autosuggest.vue index b6a1f09..a69e60d 100644 --- a/src/Autosuggest.vue +++ b/src/Autosuggest.vue @@ -410,7 +410,7 @@ export default { }; }, ensureItemVisible(item, index) { - const resultsScrollElement = document.querySelector( + const resultsScrollElement = this.$el.querySelector( `.${this.componentAttrClassAutosuggestResults}` ); @@ -418,7 +418,7 @@ export default { return; } - const itemElement = document.querySelector(`#autosuggest__results_item-${index}`); + const itemElement = this.$el.querySelector(`#autosuggest__results_item-${index}`); if (!itemElement) { return; } @@ -447,7 +447,7 @@ export default { this.currentIndex = index; }, clickedOnScrollbar(mouseX){ - const results = document.querySelector(`.${this.componentAttrClassAutosuggestResults}`); + const results = this.$el.querySelector(`.${this.componentAttrClassAutosuggestResults}`); return results && results.clientWidth <= (mouseX + 16) || false; }, onDocumentMouseDown(e) { @@ -494,10 +494,11 @@ export default { this.currentIndex = adjustedValue; - const element = document.getElementById(`autosuggest__results_item-${this.currentIndex}`); + const element = this.$el.querySelector(`#autosuggest__results_item-${this.currentIndex}`); + const hoverClass = "autosuggest__results_item-highlighted"; - if (document.querySelector(`.${hoverClass}`)) { - removeClass(document.querySelector(`.${hoverClass}`), hoverClass); + if (this.$el.querySelector(`.${hoverClass}`)) { + removeClass(this.$el.querySelector(`.${hoverClass}`), hoverClass); } if (element) { addClass(element, hoverClass);