fix(multiple) fixes navigation with multiple autosuggests instances (#78

)

* use this.$el instead of document for query selecting

Fixes #73

.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"
+      ]
     }
   ]
 }

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]):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-
-| [<img src="https://avatars.githubusercontent.com/u/5770711?v=4" width="100px;"/><br /><sub><b>Darren Jennings</b></sub>](https://darrenjennings.github.io)<br />[💻](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") | [<img src="https://avatars2.githubusercontent.com/u/411772?v=4" width="100px;"/><br /><sub><b>Evgeniy Kulish</b></sub>](https://github.com/ekulish)<br />[💻](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") |
-| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-
-
+| [<img src="https://avatars.githubusercontent.com/u/5770711?v=4" width="100px;"/><br /><sub><b>Darren Jennings</b></sub>](https://darrenjennings.github.io)<br />[💻](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") | [<img src="https://avatars2.githubusercontent.com/u/411772?v=4" width="100px;"/><br /><sub><b>Evgeniy Kulish</b></sub>](https://github.com/ekulish)<br />[💻](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") | [<img src="https://avatars3.githubusercontent.com/u/1824850?v=4" width="100px;"/><br /><sub><b>Scott Smith</b></sub>](https://github.com/scottadamsmith)<br />[🐛](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") |
+| :---: | :---: | :---: |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification. Contributions of any

__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);
 

src/Autosuggest.vue

@@ -410,15 +410,15 @@ export default {
       };
     },
     ensureItemVisible(item, index) {
-      const resultsScrollElement = document.querySelector(
+      const resultsScrollElement = this.$el.querySelector(
         `.${this.componentAttrClassAutosuggestResults}`
       );
 
       if (!item || (!index && index !== 0) || !resultsScrollElement) {
         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);