From 7efd189c7db8a1c23864f62936bd6e83def1614e Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Tue, 28 Mar 2017 14:41:12 +0100
Subject: [PATCH] Resolve broken cancel buttons

---
 README.md                         |  7 +++
 assets/scripts/src/choices.js     | 67 +++++++++++++++-------------
 assets/styles/css/base.css        |  8 ++++
 assets/styles/css/base.min.css    |  2 +-
 assets/styles/css/choices.css     |  4 +-
 assets/styles/css/choices.min.css |  2 +-
 assets/styles/scss/base.scss      |  2 +
 index.html                        | 74 +++++++++++++++----------------
 8 files changed, 94 insertions(+), 72 deletions(-)

diff --git a/README.md b/README.md
index 754129d..b8d0595 100644
--- a/README.md
+++ b/README.md
@@ -511,6 +511,13 @@ example.passedElement.addEventListener('addItem', function(event) {
 
 **Usage:** Triggered each time an item is unhighlighted.
 
+### choice
+**Arguments:** `value`
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** Triggered each time a chouce is selected **by a user**, regardless if it changes the value of the input.
+
 ### change
 **Arguments:** `value`
 
diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js
index fa991c7..f2440c2 100644
--- a/assets/scripts/src/choices.js
+++ b/assets/scripts/src/choices.js
@@ -1019,6 +1019,10 @@ class Choices {
     const choice = this.store.getChoiceById(id);
     const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
 
+    triggerEvent(this.passedElement, 'choice', {
+      choice,
+    });
+
     if (choice && !choice.selected && !choice.disabled) {
       const canAddItem = this._canAddItem(activeItems, choice.value);
 
@@ -1582,7 +1586,9 @@ class Choices {
       const activeItems = this.store.getItemsFilteredByActive();
       const hasShiftKey = e.shiftKey;
 
-      if (foundTarget = findAncestorByAttrName(target, 'data-item')) {
+      if(foundTarget = findAncestorByAttrName(target, 'data-button')) {
+        this._handleButtonAction(activeItems, foundTarget);
+      } else if (foundTarget = findAncestorByAttrName(target, 'data-item')) {
         this._handleItemAction(activeItems, foundTarget, hasShiftKey);
       } else if (foundTarget = findAncestorByAttrName(target, 'data-choice')) {
         this._handleChoiceAction(activeItems, foundTarget);
@@ -1603,6 +1609,7 @@ class Choices {
     const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
     const activeItems = this.store.getItemsFilteredByActive();
 
+
     // If target is something that concerns us
     if (this.containerOuter.contains(target)) {
       // Handle button delete
@@ -2073,76 +2080,76 @@ class Choices {
     const templates = {
       containerOuter: (direction) => {
         return strToEl(`
-            <div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
-          `);
+          <div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
+        `);
       },
       containerInner: () => {
         return strToEl(`
-            <div class="${classNames.containerInner}"></div>
-          `);
+          <div class="${classNames.containerInner}"></div>
+        `);
       },
       itemList: () => {
         return strToEl(`
-            <div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
-          `);
+          <div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
+        `);
       },
       placeholder: (value) => {
         return strToEl(`
-            <div class="${classNames.placeholder}">${value}</div>
-          `);
+          <div class="${classNames.placeholder}">${value}</div>
+        `);
       },
       item: (data) => {
         if (this.config.removeItemButton) {
           return strToEl(`
-              <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : ''} ${!data.disabled ? classNames.itemSelectable : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''} data-deletable>
-              ${data.label}<button type="button" class="${classNames.button}" data-button>Remove item</button>
-              </div>
-            `);
+            <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : ''} ${!data.disabled ? classNames.itemSelectable : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''} data-deletable>
+            ${data.label}<button type="button" class="${classNames.button}" data-button>Remove item</button>
+            </div>
+          `);
         }
         return strToEl(`
           <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}"  data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
             ${data.label}
           </div>
-          `);
+        `);
       },
       choiceList: () => {
         return strToEl(`
-            <div class="${classNames.list}" dir="ltr" role="listbox" ${this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
-          `);
+          <div class="${classNames.list}" dir="ltr" role="listbox" ${this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
+        `);
       },
       choiceGroup: (data) => {
         return strToEl(`
-            <div class="${classNames.group} ${data.disabled ? classNames.itemDisabled : ''}" data-group data-id="${data.id}" data-value="${data.value}" role="group" ${data.disabled ? 'aria-disabled="true"' : ''}>
-              <div class="${classNames.groupHeading}">${data.value}</div>
-            </div>
-          `);
+          <div class="${classNames.group} ${data.disabled ? classNames.itemDisabled : ''}" data-group data-id="${data.id}" data-value="${data.value}" role="group" ${data.disabled ? 'aria-disabled="true"' : ''}>
+            <div class="${classNames.groupHeading}">${data.value}</div>
+          </div>
+        `);
       },
       choice: (data) => {
         return strToEl(`
           <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
-              ${data.label}
-            </div>
-          `);
+            ${data.label}
+          </div>
+        `);
       },
       input: () => {
         return strToEl(`
           <input type="text" class="${classNames.input} ${classNames.inputCloned}" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list">
-          `);
+        `);
       },
       dropdown: () => {
         return strToEl(`
-            <div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
-          `);
+          <div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
+        `);
       },
       notice: (label) => {
         return strToEl(`
-            <div class="${classNames.item} ${classNames.itemChoice}">${label}</div>
-          `);
+          <div class="${classNames.item} ${classNames.itemChoice}">${label}</div>
+        `);
       },
       option: (data) => {
         return strToEl(`
-            <option value="${data.value}" selected>${data.label}</option>
-          `);
+          <option value="${data.value}" selected>${data.label}</option>
+        `);
       },
     };
 
diff --git a/assets/styles/css/base.css b/assets/styles/css/base.css
index eaa38fc..f32591b 100644
--- a/assets/styles/css/base.css
+++ b/assets/styles/css/base.css
@@ -138,4 +138,12 @@ h6, .h6 {
   display: none;
 }
 
+.zero-bottom {
+  margin-bottom: 0;
+}
+
+.zero-top {
+  margin-top: 0;
+}
+
 /*=====  End of Section comment block  ======*/
diff --git a/assets/styles/css/base.min.css b/assets/styles/css/base.min.css
index 7014a77..4ad0206 100644
--- a/assets/styles/css/base.min.css
+++ b/assets/styles/css/base.min.css
@@ -1 +1 @@
-*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:36px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}
\ No newline at end of file
+*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:36px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}
\ No newline at end of file
diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css
index 46c8a27..e143c5e 100644
--- a/assets/styles/css/choices.css
+++ b/assets/styles/css/choices.css
@@ -46,7 +46,7 @@
 }
 
 .choices[data-type*="select-one"] .choices__button {
-  background-image: url("../../icons//cross-inverse.svg");
+  background-image: url("../../icons/cross-inverse.svg");
   padding: 0;
   background-size: 8px;
   height: 100%;
@@ -113,7 +113,7 @@
   margin-left: 8px;
   padding-left: 16px;
   border-left: 1px solid #008fa1;
-  background-image: url("../../icons//cross.svg");
+  background-image: url("../../icons/cross.svg");
   background-size: 8px;
   width: 8px;
   line-height: 1;
diff --git a/assets/styles/css/choices.min.css b/assets/styles/css/choices.min.css
index 0773104..a3849ae 100644
--- a/assets/styles/css/choices.min.css
+++ b/assets/styles/css/choices.min.css
@@ -1 +1 @@
-.choices{position:relative;margin-bottom:24px;font-size:16px}.choices:focus{outline:none}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(../../icons//cross-inverse.svg);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.5}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #00bcd4}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one][dir=rtl]:after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin:0 -4px 0 8px;padding-left:16px;border-left:1px solid #008fa1;background-image:url(../../icons//cross.svg);background-size:8px;width:8px;line-height:1;opacity:.75}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden;word-break:break-all}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px;font-size:14px}[dir=rtl] .choices__list--dropdown .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable:after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:14px;margin-bottom:5px;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input:focus{outline:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:.5}
\ No newline at end of file
+.choices{position:relative;margin-bottom:24px;font-size:16px}.choices:focus{outline:none}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(../../icons/cross-inverse.svg);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.5}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #00bcd4}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one][dir=rtl]:after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin:0 -4px 0 8px;padding-left:16px;border-left:1px solid #008fa1;background-image:url(../../icons/cross.svg);background-size:8px;width:8px;line-height:1;opacity:.75}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden;word-break:break-all}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{position:relative;padding:10px;font-size:14px}[dir=rtl] .choices__list--dropdown .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable{padding-right:100px}.choices__list--dropdown .choices__item--selectable:after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable:after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:14px;margin-bottom:5px;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input:focus{outline:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:.5}
\ No newline at end of file
diff --git a/assets/styles/scss/base.scss b/assets/styles/scss/base.scss
index dafb236..de61bbf 100644
--- a/assets/styles/scss/base.scss
+++ b/assets/styles/scss/base.scss
@@ -118,5 +118,7 @@ h6, .h6 { font-size: $global-font-size-h6; }
 }
 
 .visible-ie { display: none; }
+.zero-bottom {  margin-bottom: 0; }
+.zero-top {  margin-top: 0; }
 
 /*=====  End of Section comment block  ======*/
diff --git a/index.html b/index.html
index 9998ca8..cf6c274 100644
--- a/index.html
+++ b/index.html
@@ -137,6 +137,10 @@
         <option value="Dropdown item 4" disabled>Dropdown item 4</option>
       </select>
 
+      <label for="label-event">Use label in event (add/remove)</label>
+      <p id="message"></p>
+      <select id="choices-multiple-labels" multiple></select>
+
       <hr>
 
       <h2>Single select input</h2>
@@ -230,8 +234,8 @@
         <option value="Michigan">Michigan</option>
       </select>
 
-      <label for="choices-custom-templates">Custom templates</label>
-      <select class="form-control" name="choices-custom-templates" id="choices-custom-templates" placeholder="This is a placeholder">
+      <label for="choices-single-custom-templates">Custom templates</label>
+      <select class="form-control" name="choices-single-custom-templates" id="choices-single-custom-templates" placeholder="This is a placeholder">
         <option value="React">React</option>
         <option value="React">Angular</option>
         <option value="React">Ember</option>
@@ -256,11 +260,6 @@
         <option value="Queens">Queens</option>
         <option value="Staten Island">Staten Island</option>
       </select>
-
-      <label for="label-event">Use label in event (add/remove)</label>
-      <select id="choices-select" multiple></select>
-      <p id="message"></p>
-
     </div>
   </div>
   <script>
@@ -330,7 +329,30 @@
 
       var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
         removeItemButton: true,
-      })
+      });
+
+      /* Use label on event */
+      var choicesSelect = new Choices('#choices-multiple-labels', {
+        search: false,
+        removeItemButton: true,
+        choices: [
+          {value: 'One', label: 'Label One'},
+          {value: 'Two', label: 'Label Two', disabled: true},
+          {value: 'Three', label: 'Label Three'},
+        ],
+      }).setChoices([
+        {value: 'Four', label: 'Label Four', disabled: true},
+        {value: 'Five', label: 'Label Five'},
+        {value: 'Six', label: 'Label Six', selected: true},
+      ], 'value', 'label', false);
+
+      choicesSelect.passedElement.addEventListener('addItem', function(event) {
+        document.getElementById('message').innerHTML = 'You just added "' + event.detail.label + '"';
+      });
+
+      choicesSelect.passedElement.addEventListener('removeItem', function(event) {
+        document.getElementById('message').innerHTML = 'You just removed "' + event.detail.label + '"';
+      });
 
       var singleFetch = new Choices('#choices-single-remote-fetch', {
         placeholder: true,
@@ -433,7 +455,7 @@
         }
       });
 
-      var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
+      var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
         callbackOnCreateTemplates: function (strToEl) {
           var classNames = this.config.classNames;
           return {
@@ -442,44 +464,20 @@
                 <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}"  data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
                   <span style="margin-right:10px;">🎉</span> ${data.label}
                 </div>
-                `);
+              `);
             },
             choice: (data) => {
               return strToEl(`
-                <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
-                    <span style="margin-right:10px;">👉🏽</span> ${data.label}
-                  </div>
-                `);
+              <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
+                  <span style="margin-right:10px;">👉🏽</span> ${data.label}
+                </div>
+              `);
             },
           };
         }
       });
 
       var boroughs = new Choices(document.getElementById('boroughs')).disable();
-
-/* Use label on event */
-      var choicesSelect = new Choices('#choices-select', {
-        search: false,
-        removeItemButton: true,
-        choices: [
-          {value: 'One', label: 'Label One'},
-          {value: 'Two', label: 'Label Two', disabled: true},
-          {value: 'Three', label: 'Label Three'},
-        ],
-      }).setChoices([
-        {value: 'Four', label: 'Label Four', disabled: true},
-        {value: 'Five', label: 'Label Five'},
-        {value: 'Six', label: 'Label Six', selected: true},
-      ], 'value', 'label', false);
-      function useLabelOnAddItem (event) {
-		document.getElementById('message').innerHTML = 'You just added ' + event.detail.label;
-      };
-      function useLabelOnRemoveItem (event) {
-		document.getElementById('message').innerHTML = 'You just removed ' + event.detail.label;
-      };
-      choicesSelect.passedElement.addEventListener('addItem',useLabelOnAddItem);
-      choicesSelect.passedElement.addEventListener('removeItem',useLabelOnRemoveItem);
-/* End of use label on event*/
     });
   </script>