Pass group value to callbacks

assets/scripts/dist/choices.js

@@ -1,4 +1,4 @@
-/*! choices.js v2.2.3 | (c) 2016 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ 
+/*! choices.js v2.2.5 | (c) 2016 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ 
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();

assets/scripts/src/actions/index.js

@@ -1,11 +1,11 @@
-export const addItem = (value, label, id, choiceId, activateOptions) => {
+export const addItem = (value, label, id, choiceId, groupId) => {
   return {
     type: 'ADD_ITEM',
     value,
     label,
     id,
     choiceId,
-    activateOptions,
+    groupId,
   };
 };
 
@@ -70,4 +70,4 @@ export const clearAll = () => {
   return {
     type: 'CLEAR_ALL',
   };
-};
+};

assets/scripts/src/choices.js

@@ -438,10 +438,17 @@ class Choices {
     if (this.config.callbackOnHighlightItem) {
       const callback = this.config.callbackOnHighlightItem;
       if (isType('Function', callback)) {
-        callback(id, item.value, this.passedElement);
+        const group = this.store.getGroupById(item.groupId);
+        if(group && group.value) {
+          callback(id, item.value, group.value);
+        } else {
+          callback(id, item.value)
+        }
       } else {
         console.error('callbackOnHighlightItem: Callback is not a function');
       }
+
+
     }
 
     return this;
@@ -462,7 +469,12 @@ class Choices {
     if (this.config.callbackOnUnhighlightItem) {
       const callback = this.config.callbackOnUnhighlightItem;
       if (isType('Function', callback)) {
-        callback(id, item.value, this.passedElement);
+        const group = this.store.getGroupById(item.groupId);
+        if(group && group.value) {
+          callback(id, item.value, group.value);
+        } else {
+          callback(id, item.value)
+        }
       } else {
         console.error('callbackOnUnhighlightItem: Callback is not a function');
       }
@@ -861,7 +873,7 @@ class Choices {
     if (this.config.callbackOnChange) {
       const callback = this.config.callbackOnChange;
       if (isType('Function', callback)) {
-        callback(value, this.passedElement);
+        callback(value);
       } else {
         console.error('callbackOnChange: Callback is not a function');
       }
@@ -950,7 +962,7 @@ class Choices {
       const canAddItem = this._canAddItem(activeItems, choice.value);
 
       if (canAddItem.response) {
-        this._addItem(choice.value, choice.label, choice.id);
+        this._addItem(choice.value, choice.label, choice.id, choice.groupId);
         this._triggerChange(choice.value);
       }
     }
@@ -1145,7 +1157,7 @@ class Choices {
         if (this.config.callbackOnSearch) {
           const callback = this.config.callbackOnSearch;
           if (isType('Function', callback)) {
-            callback(value, this.passedElement);
+            callback(value);
           } else {
             console.error('callbackOnSearch: Callback is not a function');
           }
@@ -1800,11 +1812,12 @@ class Choices {
    * @return {Object} Class instance
    * @public
    */
-  _addItem(value, label, choiceId = -1) {
+  _addItem(value, label, choiceId = -1, groupId = -1) {
     let passedValue = isType('String', value) ? value.trim() : value;
     const items = this.store.getItems();
     const passedLabel = label || passedValue;
     const passedOptionId = parseInt(choiceId, 10) || -1;
+    const passedGroupId = parseInt(groupId, 10) || -1;
 
     // If a prepended value has been passed, prepend it
     if (this.config.prependValue) {
@@ -1819,7 +1832,7 @@ class Choices {
     // Generate unique id
     const id = items ? items.length + 1 : 1;
 
-    this.store.dispatch(addItem(passedValue, passedLabel, id, passedOptionId));
+    this.store.dispatch(addItem(passedValue, passedLabel, id, passedOptionId, passedGroupId));
 
     if (this.passedElement.type === 'select-one') {
       this.removeActiveItems(id);
@@ -1828,8 +1841,13 @@ class Choices {
     // Run callback if it is a function
     if (this.config.callbackOnAddItem) {
       const callback = this.config.callbackOnAddItem;
+      const group = this.store.getGroupById(passedGroupId);
       if (isType('Function', callback)) {
-        callback(id, passedValue, this.passedElement);
+        if(group && group.value) {
+          callback(id, passedValue, group.value);
+        } else {
+          callback(id, passedValue);
+        }
       } else {
         console.error('callbackOnAddItem: Callback is not a function');
       }
@@ -1859,11 +1877,16 @@ class Choices {
 
     // Run callback
     if (callback) {
-      if (!isType('Function', callback)) {
+      if (isType('Function', callback)) {
+        const group = this.store.getGroupById(item.groupId);
+        if(group && group.value) {
+          callback(id, value, group.value);
+        } else {
+          callback(id, value);
+        }
+      } else {
         console.error('callbackOnRemoveItem: Callback is not a function');
-        return;
       }
-      callback(id, value, this.passedElement);
     }
 
     return this;

assets/scripts/src/reducers/items.js

@@ -5,6 +5,7 @@ const items = (state = [], action) => {
       const newState = [...state, {
         id: action.id,
         choiceId: action.choiceId,
+        groupId: action.groupId,
         value: action.value,
         label: action.label,
         active: true,

assets/scripts/src/store/index.js

@@ -145,6 +145,20 @@ export default class Store {
 
     return values;
   }
+
+  /**
+   * Get group by group id
+   * @param  {Number} id Group ID
+   * @return {Object}    Group data
+   */
+  getGroupById(id) {
+    const groups = this.getGroups();
+    const foundGroup = groups.find((group) => {
+      return group.id === id;
+    });
+
+    return foundGroup;
+  }
 }
 
 module.exports = Store;

index.html

@@ -88,7 +88,7 @@
       </select>
 
       <label for="choices-multiple-groups">Option groups</label>
-      <select class="form-control" data-trigger name="choices-multiple-groups" id="choices-multiple-groups" placeholder="This is a placeholder" multiple>
+      <select class="form-control" name="choices-multiple-groups" id="choices-multiple-groups" placeholder="This is a placeholder" multiple>
         <optgroup label="UK">
           <option value="London">London</option>
           <option value="Manchester">Manchester</option>
@@ -263,10 +263,10 @@
         maxItemCount: 5,
         removeItemButton: true,
         callbackOnHighlightItem: function(id, value, passedInput) {
-          console.log(value);
+          // console.log(value);
         },
         callbackOnUnhighlightItem: function(id, value, passedInput) {
-          console.log(value);
+          // console.log(value);
         },
       });
 
@@ -295,11 +295,26 @@
         items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
       });
 
+      var multipleDefault = new Choices('#choices-multiple-groups', {
+        callbackOnHighlightItem: function(id, value, groupValue) {
+          console.log(arguments);
+        },
+        callbackOnUnhighlightItem: function(id, value, groupValue) {
+          console.log(arguments);
+        },
+        callbackOnAddItem: function(id, value, groupValue) {
+          console.log(arguments);
+        },
+        callbackOnRemoveItem: function(id, value, groupValue) {
+          console.log(arguments);
+        },
+      });
+
       var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
         placeholder: true,
         placeholderValue: 'Pick an Strokes record',
         maxItemCount: 5,
-        callbackOnChange: function(value, passedInput) { console.log(value) }
+        // callbackOnChange: function(value, passedInput) { console.log(value) }
       }).ajax(function(callback) {
         fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
         .then(function(response) {
@@ -308,7 +323,7 @@
           });
         })
         .catch(function(error) {
-          console.log(error);
+          // console.log(error);
         });
       });
 
@@ -328,7 +343,7 @@
           });
         })
         .catch(function(error) {
-          console.log(error);
+          // console.log(error);
         });
       });
 
@@ -347,7 +362,7 @@
               callback(data.releases, 'title', 'title');
               singleXhrRemove.setValueByChoice('How Soon Is Now?');
             } else {
-              console.error(status);
+              // console.error(status);
             }
           }
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./assets/scripts/dist/choices.min.js",
   "scripts": {

tests/spec/choices_spec.js

@@ -320,7 +320,7 @@ describe('Choices', () => {
         ctrlKey: false
       });
 
-      expect(this.choices.config.callbackOnChange).toHaveBeenCalledWith(jasmine.any(String), jasmine.any(HTMLElement));
+      expect(this.choices.config.callbackOnChange).toHaveBeenCalledWith(jasmine.any(String));
     });
 
     it('should open the dropdown on click', function() {