Merge pull request #123 from samueldjack/dropdown-events

Dropdown events

README.md

@@ -523,6 +523,16 @@ example.passedElement.addEventListener('addItem', function(event) {
 
 **Usage:** Triggered when a user types into an input to search choices.
 
+### showDropdown
+**Arguments:** - **Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** Triggered when the dropdown is shown.
+
+### hideDropdown
+**Arguments:** - **Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** Triggered when the dropdown is hidden.
+
 ## Methods
 Methods can be called either directly or by chaining:
 

assets/scripts/dist/choices.js

@@ -566,12 +566,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	          (0, _utils.triggerEvent)(this.passedElement, 'highlightItem', {
 	            id: id,
 	            value: item.value,
+	            label: item.label,
 	            groupValue: group.value
 	          });
 	        } else {
 	          (0, _utils.triggerEvent)(this.passedElement, 'highlightItem', {
 	            id: id,
-	            value: item.value
+	            value: item.value,
+	            label: item.label
 	          });
 	        }
 	      }
@@ -600,12 +602,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	        (0, _utils.triggerEvent)(this.passedElement, 'unhighlightItem', {
 	          id: id,
 	          value: item.value,
+	          label: item.label,
 	          groupValue: group.value
 	        });
 	      } else {
 	        (0, _utils.triggerEvent)(this.passedElement, 'unhighlightItem', {
 	          id: id,
-	          value: item.value
+	          value: item.value,
+	          label: item.label
 	        });
 	      }
 
@@ -773,6 +777,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this.input.focus();
 	      }
 
+	      (0, _utils.triggerEvent)(this.passedElement, "showDropdown", {});
+
 	      return this;
 	    }
 
@@ -803,6 +809,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this.input.blur();
 	      }
 
+	      (0, _utils.triggerEvent)(this.passedElement, "hideDropdown", {});
+
 	      return this;
 	    }
 

assets/scripts/src/choices.js

@@ -653,6 +653,8 @@ class Choices {
       this.input.focus();
     }
 
+    triggerEvent(this.passedElement, "showDropdown", {});
+
     return this;
   }
 
@@ -678,6 +680,8 @@ class Choices {
       this.input.blur();
     }
 
+    triggerEvent(this.passedElement, "hideDropdown", {});
+
     return this;
   }
 

tests/spec/choices_spec.js

@@ -386,6 +386,52 @@ describe('Choices', () => {
       expect(document.activeElement === this.choices.input && container.classList.contains(openState)).toBe(false);
     });
 
+    it('should trigger showDropdown on dropdown opening', function() {
+      this.choices = new Choices(this.input);
+      const container = this.choices.containerOuter;
+      
+      const showDropdownSpy = jasmine.createSpy('showDropdownSpy');
+      const passedElement = this.choices.passedElement;
+
+      passedElement.addEventListener('showDropdown', showDropdownSpy);
+
+      this.choices.input.focus();
+
+      this.choices._onClick({
+        target: container,
+        ctrlKey: false,
+        preventDefault: () => {}
+      });
+
+      expect(showDropdownSpy).toHaveBeenCalled();
+    });
+
+it('should trigger hideDropdown on dropdown closing', function() {
+      this.choices = new Choices(this.input);
+      const container = this.choices.containerOuter;
+      
+      const hideDropdownSpy = jasmine.createSpy('hideDropdownSpy');
+      const passedElement = this.choices.passedElement;
+
+      passedElement.addEventListener('hideDropdown', hideDropdownSpy);
+
+      this.choices.input.focus();
+
+      this.choices._onClick({
+        target: container,
+        ctrlKey: false,
+        preventDefault: () => {}
+      });
+
+      this.choices._onClick({
+        target: container,
+        ctrlKey: false,
+        preventDefault: () => {}
+      });
+
+      expect(hideDropdownSpy).toHaveBeenCalled();
+    });
+
     it('should filter choices when searching', function() {
       this.choices = new Choices(this.input);