Version 2.7.6

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

@@ -777,6 +777,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this.input.focus();
 	      }
 
+	      (0, _utils.triggerEvent)(this.passedElement, "showDropdown", {});
+
 	      return this;
 	    }
 
@@ -807,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;
   }
 

assets/styles/scss/choices.scss

@@ -17,7 +17,7 @@ $choices-keyline-color: #DDDDDD !default;
 $choices-primary-color: #00BCD4 !default;
 $choices-disabled-color: #eaeaea !default;
 $choices-highlight-color: $choices-primary-color !default;
-$choices-button-icon-path: '../../icons/' !default;
+$choices-button-icon-path: '../../icons' !default;
 $choices-button-dimension: 8px !default;
 $choices-button-offset: 8px !default;
 

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