Version 2.7.3

README.md

@@ -68,7 +68,7 @@ Or include Choices directly:
     paste: true,
     search: true,
     searchFloor: 1,
-    flip: true,
+    position: 'auto',
     resetScrollPosition: true,
     regexFilter: null,
     shouldSort: true,
@@ -252,12 +252,12 @@ Pass an array of objects:
 
 **Usage:** The minimum length a search value should be before choices are searched.
 
-### flip
-**Type:** `Boolean` **Default:** `true`
+### position
+**Type:** `Boolean` **Default:** `auto`
 
 **Input types affected:** `select-one`, `select-multiple`
 
-**Usage:** Whether the dropdown should appear above the input (rather than beneath) if there is not enough space within the window. 
+**Usage:** Whether the dropdown should appear above or below the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it. 
 
 ### resetScrollPosition
 **Type:** `Boolean` **Default:** `true`

assets/scripts/src/choices.js

@@ -60,7 +60,7 @@ class Choices {
       paste: true,
       search: true,
       searchFloor: 1,
-      flip: true,
+      position: 'auto',
       resetScrollPosition: true,
       regexFilter: null,
       shouldSort: true,
@@ -615,17 +615,28 @@ class Choices {
   showDropdown(focusInput = false) {
     const body = document.body;
     const html = document.documentElement;
-    const winHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,
-      html.scrollHeight, html.offsetHeight);
+    const winHeight = Math.max(
+        body.scrollHeight,
+        body.offsetHeight,
+        html.clientHeight,
+        html.scrollHeight,
+        html.offsetHeight
+      );
 
     this.containerOuter.classList.add(this.config.classNames.openState);
     this.containerOuter.setAttribute('aria-expanded', 'true');
     this.dropdown.classList.add(this.config.classNames.activeState);
 
     const dimensions = this.dropdown.getBoundingClientRect();
     const dropdownPos = Math.ceil(dimensions.top + window.scrollY + dimensions.height);
+
     // If flip is enabled and the dropdown bottom position is greater than the window height flip the dropdown.
-    const shouldFlip = this.config.flip ? dropdownPos >= winHeight : false;
+    let shouldFlip = false;
+    if (this.config.position === 'auto') {
+      shouldFlip = dropdownPos >= winHeight;
+    } else if (this.config.position === 'top') {
+      shouldFlip = true;
+    }
 
     if (shouldFlip) {
       this.containerOuter.classList.add(this.config.classNames.flippedState);

tests/spec/choices_spec.js

@@ -76,7 +76,7 @@ describe('Choices', () => {
       expect(this.choices.config.paste).toEqual(jasmine.any(Boolean));
       expect(this.choices.config.search).toEqual(jasmine.any(Boolean));
       expect(this.choices.config.searchFloor).toEqual(jasmine.any(Number));
-      expect(this.choices.config.flip).toEqual(jasmine.any(Boolean));
+      expect(this.choices.config.position).toEqual(jasmine.any(String));
       expect(this.choices.config.regexFilter).toEqual(null);
       expect(this.choices.config.sortFilter).toEqual(jasmine.any(Function));
       expect(this.choices.config.sortFields).toEqual(jasmine.any(Array) || jasmine.any(String));
@@ -368,7 +368,8 @@ describe('Choices', () => {
 
     it('should close the dropdown on double click', function() {
       this.choices = new Choices(this.input);
-      const container = this.choices.containerOuter;
+      const container = this.choices.containerOuter,
+        openState = this.choices.config.classNames.openState;
 
       this.choices._onClick({
         target: container,
@@ -382,7 +383,7 @@ describe('Choices', () => {
         preventDefault: () => {}
       });
 
-      expect(document.activeElement === this.choices.input && container.classList.contains('is-open')).toBe(false);
+      expect(document.activeElement === this.choices.input && container.classList.contains(openState)).toBe(false);
     });
 
     it('should filter choices when searching', function() {
@@ -758,4 +759,47 @@ describe('Choices', () => {
       expect(randomItem.active).toBe(false);
     });
   });
+
+  describe('should react to config options', function() {
+    beforeEach(function() {
+      this.input = document.createElement('select');
+      this.input.className = 'js-choices';
+      this.input.setAttribute('multiple', '');
+
+      for (let i = 1; i < 4; i++) {
+        const option = document.createElement('option');
+
+        option.value = `Value ${i}`;
+        option.innerHTML = `Value ${i}`;
+
+        if (i % 2) {
+          option.selected = true;
+        }
+
+        this.input.appendChild(option);
+      }
+
+      document.body.appendChild(this.input);
+    });
+
+    it('should flip the dropdown', function() {
+      this.choices = new Choices(this.input, {
+        position: 'top'
+      });
+
+      const container = this.choices.containerOuter;
+      this.choices.input.focus();
+      expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(true);
+    });
+
+    it('shouldn\'t flip the dropdown', function() {
+      this.choices = new Choices(this.input, {
+        position: 'bottom'
+      });
+
+      const container = this.choices.containerOuter;
+      this.choices.input.focus();
+      expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(false);
+    });
+  });
 });