Select-one : clear current selection

yabab-dev · Jul 30, 2016 · 8d7ad12 · 8d7ad12
1 parent f67e9a3
commit 8d7ad12
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 5 deletions.
diff --git a/assets/icons/cross-black.svg b/assets/icons/cross-black.svg
diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js
@@ -762,6 +762,13 @@ export class Choices {
                 e.preventDefault();
 
                 const hasShiftKey = e.shiftKey ? true : false;
+
+                if(e.target.hasAttribute('data-clear-one')) {
+                    const itemToRemove = activeItems[0];
+                    this._removeItem(itemToRemove);
+                    e.target.style.display = 'none';
+                    return;
+                }
 
                 if(this.passedElement.type !== 'text' && !this.dropdown.classList.contains(this.config.classNames.activeState)) {
                     // For select inputs we always want to show the dropdown if it isn't already showing
@@ -772,7 +779,7 @@ export class Choices {
                 if(this.input !== document.activeElement) {
                     this.input.focus();
                 }
-
+                
                 if(e.target.hasAttribute('data-button')) {
                     if(this.config.removeItems && this.config.removeItemButton) {
                         const itemId       = e.target.parentNode.getAttribute('data-id');
@@ -1033,6 +1040,12 @@ export class Choices {
         if(this.passedElement.type === 'select-one') {
             this.removeActiveItems(id);
         }  
+
+        // Display clear button on select-one element
+        if (this.config.removeItemButton && this.passedElement.type === 'select-one') {
+            const clearButton = this.containerInner.querySelector('[data-clear-one]');
+            clearButton.style.display = 'inline-block';
+        }
 
         // Run callback if it is a function
         if(this.config.callbackOnAddItem){
@@ -1142,7 +1155,11 @@ export class Choices {
                 return strToEl(`<div class="${ classNames.containerOuter }" data-type="${ this.passedElement.type }"></div>`);
             },
             containerInner: () => {
-                return strToEl(`<div class="${ classNames.containerInner }"></div>`);
+                if(this.config.removeItemButton && this.passedElement.type === 'select-one') {
+                    return strToEl(`<div class="${ classNames.containerInner }"><button class="${ classNames.button } choices__clear_one" data-clear-one>Remove current selection</button></div>`);
+                }else{
+                    return strToEl(`<div class="${ classNames.containerInner }"></div>`);
+                }
             },
             itemList: () => {
                 return strToEl(`<div class="${ classNames.list } ${ this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems }"></div>`);

diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css
@@ -173,6 +173,13 @@
   line-height: 1;
   cursor: pointer; }
 
+.choices__clear_one {
+  background-image: url("../../icons/cross-black.svg");
+  margin: 0;
+  border: 0;
+  float: right;
+  margin-top: 6px; }
+
 .choices__input {
   background-color: #f9f9f9;
   font-size: 1.4rem;

diff --git a/assets/styles/css/choices.min.css b/assets/styles/css/choices.min.css
diff --git a/assets/styles/scss/choices.scss b/assets/styles/scss/choices.scss
@@ -11,6 +11,7 @@ $choices-keyline-color: #DDDDDD;
 $choices-primary-color: #00BCD4;
 $choices-disabled-color: #eaeaea;
 $choices-button-icon-path: '../../icons/cross.svg';
+$choices-button-icon-black-path: '../../icons/cross-black.svg';
 
 .choices {
     position: relative;
@@ -192,6 +193,14 @@ $choices-button-icon-path: '../../icons/cross.svg';
     cursor: pointer;
 }
 
+.choices__clear_one {
+    background-image: url($choices-button-icon-black-path);
+    margin: 0;
+    border: 0;
+    float: right;
+    margin-top: 6px;
+}
+
 .choices__input {
     background-color: mix(#000000, #FFFFFF, 2.5%);
     font-size: 1.4rem;

diff --git a/index.html b/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Choices</title>
-    <link rel="stylesheet" href="assets/styles/css/base.min.css">
-    <link rel="stylesheet" href="assets/styles/css/choices.min.css">
+    <link rel="stylesheet" href="assets/styles/css/base.css">
+    <link rel="stylesheet" href="assets/styles/css/choices.css">
     <script src="assets/scripts/dist/choices.min.js"></script>
 </head>
 <body>
@@ -230,6 +230,7 @@ <h2>Single select input</h2>
             });
 
             const choices15 = new Choices('#choices-15', {
+                removeItemButton: true,
                 choices: [
                     {value: 'One', label: 'Label One', selected: true, disabled: false},
                     {value: 'Two', label: 'Label Two', disabled: true},