#93 fixed sharing onOptionClick handler in multiple autocomplete instances

Author: bugy

js/autocomplete.js

@@ -161,6 +161,7 @@
 
       // Initialize dropdown
       let dropdownOptions = $.extend(
+        {},
         Autocomplete.defaults.dropdownOptions,
         this.options.dropdownOptions
       );
@@ -305,7 +306,7 @@
       //custom filters may return results where the string does not match any part
       if (start == -1 || end == -1) {
         return [label, '', ''];
-      } 
+      }
       return [label.slice(0, start), label.slice(start, end + 1), label.slice(end + 1)];
     }
 
@@ -389,7 +390,7 @@
         const item = document.createElement('li');
         if (!!entry.data) {
           const img = document.createElement('img');
-          img.classList.add("right", "circle");
+          img.classList.add('right', 'circle');
           img.src = entry.data;
           item.appendChild(img);
         }
@@ -399,11 +400,11 @@
         if (this.options.allowUnsafeHTML) {
           s.innerHTML = parts[0] + '<span class="highlight">' + parts[1] + '</span>' + parts[2];
         } else {
-          s.appendChild(document.createTextNode(parts[0]))
-          if (!!parts[1]){
+          s.appendChild(document.createTextNode(parts[0]));
+          if (!!parts[1]) {
             const highlight = document.createElement('span');
             highlight.textContent = parts[1];
-            highlight.classList.add("highlight");
+            highlight.classList.add('highlight');
             s.appendChild(highlight);
             s.appendChild(document.createTextNode(parts[2]));
           }

js/dropdown.js

@@ -355,7 +355,9 @@
       if (!!this.options.container) {
         $(this.options.container).append(this.dropdownEl);
       } else if (containerEl) {
-        $(containerEl).append(this.dropdownEl);
+        if (!containerEl.contains(this.dropdownEl)) {
+          $(containerEl).append(this.dropdownEl);
+        }
       } else {
         this.$el.after(this.dropdownEl);
       }

tests/spec/autocomplete/autocompleteSpec.js

@@ -97,6 +97,47 @@ describe("Autocomplete Plugin", function () {
         done();
       }, 200);
     });
+
+    it("should select option on click", function(done) {
+      let normal = document.querySelector('#normal-autocomplete');
+
+      M.Autocomplete.init(normal, { data: { 'Value A': null }, minLength: 0 });
+
+      openDropdownAndSelectFirstOption(normal, () => {
+        expect(normal.value).toEqual('Value A', 'Value should equal chosen option.');
+        done();
+      });
+    });
+
+    it("should select proper options on both autocompletes", function(done) {
+      let normal = document.querySelector('#normal-autocomplete');
+      let limited = document.querySelector('#limited-autocomplete');
+      M.Autocomplete.init(normal, { data: { 'Value A': null }, minLength: 0 });
+      M.Autocomplete.init(limited, { data: { 'Value B': null }, minLength: 0 });
+
+      openDropdownAndSelectFirstOption(normal, () => {
+        openDropdownAndSelectFirstOption(limited, () => {
+          expect(normal.value).toEqual('Value A', 'Value should equal chosen option.');
+          expect(limited.value).toEqual('Value B', 'Value should equal chosen option.');
+          done();
+        });
+      });
+    });
   });
 
+  function openDropdownAndSelectFirstOption(autocomplete, onFinish) {
+    click(autocomplete);
+
+    setTimeout(function() {
+      let firstOption = autocomplete.parentNode.querySelector('.autocomplete-content li');
+      click(firstOption);
+
+      setTimeout(function() {
+        onFinish();
+      }, 300);
+
+    }, 200);
+  }
+
+
 });