Update dropdown methods

assets/scripts/src/choices.js

@@ -754,8 +754,7 @@ class Choices {
 
     this.containerOuter.classList.add(this.config.classNames.openState);
     this.containerOuter.setAttribute('aria-expanded', 'true');
-    this.dropdown.element.classList.add(this.config.classNames.activeState);
+    this.dropdown.show();
-    this.dropdown.element.setAttribute('aria-expanded', 'true');
 
     const dimensions = this.dropdown.element.getBoundingClientRect();
     const dropdownPos = Math.ceil(dimensions.top + window.scrollY + this.dropdown.offsetHeight);
@@ -794,8 +793,7 @@ class Choices {
 
     this.containerOuter.classList.remove(this.config.classNames.openState);
     this.containerOuter.setAttribute('aria-expanded', 'false');
-    this.dropdown.element.classList.remove(this.config.classNames.activeState);
+    this.dropdown.hide();
-    this.dropdown.element.setAttribute('aria-expanded', 'false');
 
     if (isFlipped) {
       this.containerOuter.classList.remove(this.config.classNames.flippedState);
@@ -817,13 +815,7 @@ class Choices {
    * @public
    */
   toggleDropdown() {
-    const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
+    this.dropdown.toggle();
-    if (hasActiveDropdown) {
-      this.hideDropdown();
-    } else {
-      this.showDropdown(true);
-    }
-
     return this;
   }
 
@@ -1246,7 +1238,7 @@ class Choices {
     const id = element.getAttribute('data-id');
     const choice = this.store.getChoiceById(id);
     const passedKeyCode = activeItems[0] && activeItems[0].keyCode ? activeItems[0].keyCode : null;
-    const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
+    const hasActiveDropdown = this.dropdown.isActive;
 
     // Update choice keyCode
     choice.keyCode = passedKeyCode;
@@ -1602,7 +1594,7 @@ class Choices {
     const target = e.target;
     const activeItems = this.store.getItemsFilteredByActive();
     const hasFocusedInput = this.input === document.activeElement;
-    const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
+    const hasActiveDropdown = this.dropdown.isActive;
     const hasItems = this.itemList && this.itemList.children;
     const keyString = String.fromCharCode(e.keyCode);
 
@@ -1678,7 +1670,7 @@ class Choices {
 
     const onEscapeKey = () => {
       if (hasActiveDropdown) {
-        this.toggleDropdown();
+        this.dropdown.hide();
         this.containerOuter.focus();
       }
     };
@@ -1843,7 +1835,7 @@ class Choices {
    */
   _onTouchEnd(e) {
     const target = e.target || e.touches[0].target;
-    const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
+    const hasActiveDropdown = this.dropdown.isActive;
 
     // If a user tapped within our container...
     if (this.wasTap === true && this.containerOuter.contains(target)) {
@@ -1911,7 +1903,7 @@ class Choices {
    */
   _onClick(e) {
     const target = e.target;
-    const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
+    const hasActiveDropdown = this.dropdown.isActive;
     const activeItems = this.store.getItemsFilteredByActive();
 
     // If target is something that concerns us
@@ -2707,7 +2699,7 @@ class Choices {
     this.input = input;
     this.choiceList = choiceList;
     this.itemList = itemList;
-    this.dropdown = new Dropdown(this, dropdown);
+    this.dropdown = new Dropdown(this, dropdown, this.config.classNames);
 
     // Hide passed input
     this.passedElement.classList.add(

assets/scripts/src/components/dropdown.js

@@ -1,7 +1,8 @@
 export default class Dropdown {
-  constructor(instance, element) {
+  constructor(instance, element, classNames) {
     this.instance = instance;
     this.element = element;
+    this.classNames = classNames;
     this.dimensions = this.element.getBoundingClientRect();
     this.position = Math.ceil(this.dimensions.top + window.scrollY + this.element.offsetHeight);
     this.isActive = false;
@@ -14,9 +15,9 @@ export default class Dropdown {
    */
   toggle() {
     if (this.isActive) {
-      this.hideDropdown();
+      this.hide();
     } else {
-      this.showDropdown();
+      this.show();
     }
 
     return this.instance;
@@ -28,8 +29,8 @@ export default class Dropdown {
    * @public
    */
   show() {
-    this.dropdown.classList.add(this.config.classNames.activeState);
+    this.element.classList.add(this.classNames.activeState);
-    this.dropdown.setAttribute('aria-expanded', 'true');
+    this.element.setAttribute('aria-expanded', 'true');
     this.isActive = true;
     return this.instance;
   }
@@ -40,7 +41,7 @@ export default class Dropdown {
    * @public
    */
   hide() {
-    this.element.classList.remove(this.config.classNames.activeState);
+    this.element.classList.remove(this.classNames.activeState);
     this.element.setAttribute('aria-expanded', 'false');
     this.isActive = false;
     return this.instance;

tests/spec/choices_spec.js

@@ -763,10 +763,10 @@ describe('Choices', () => {
     });
 
     it('should handle toggleDropdown()', function() {
-      spyOn(this.choices, 'hideDropdown');
+      spyOn(this.choices.dropdown, 'hide');
-      this.choices.showDropdown();
+      this.choices.dropdown.show();
-      this.choices.toggleDropdown();
+      this.choices.dropdown.toggle();
-      expect(this.choices.hideDropdown).toHaveBeenCalled();
+      expect(this.choices.dropdown.hide).toHaveBeenCalled();
     });
 
     it('should handle hideDropdown()', function() {