From 10db5b85f5f0f7ab7d697d6df3f54e348475aca7 Mon Sep 17 00:00:00 2001
From: Adam Mockor <adam.mockor@gmail.com>
Date: Thu, 6 Apr 2017 20:43:19 +0200
Subject: [PATCH] set placeholder choice as active after click on remove item
 button in single select mode

---
 assets/scripts/src/choices.js     | 15 +++++++++++++++
 assets/scripts/src/store/index.js | 13 +++++++++++++
 index.html                        |  1 +
 tests/spec/choices_spec.js        | 21 +++++++++++++++++++++
 4 files changed, 50 insertions(+)

diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js
index 89532fd..616b35d 100644
--- a/assets/scripts/src/choices.js
+++ b/assets/scripts/src/choices.js
@@ -985,6 +985,21 @@ class Choices {
       // Remove item associated with button
       this._removeItem(itemToRemove);
       this._triggerChange(itemToRemove.value);
+
+      if (this.passedElement.type === 'select-one') {
+        const placeholderChoice = this.store.getPlaceholderChoice();
+
+        if (placeholderChoice) {
+          this._addItem(
+            placeholderChoice.value,
+            placeholderChoice.label,
+            placeholderChoice.id,
+            placeholderChoice.groupId,
+            placeholderChoice.placeholder
+          );
+          this._triggerChange(placeholderChoice.value);
+        }
+      }
     }
   }
 
diff --git a/assets/scripts/src/store/index.js b/assets/scripts/src/store/index.js
index 7487638..8cedab8 100644
--- a/assets/scripts/src/store/index.js
+++ b/assets/scripts/src/store/index.js
@@ -159,6 +159,19 @@ export default class Store {
 
     return foundGroup;
   }
+
+  /**
+   * Get placeholder choice from store
+   * @return {Object} Found placeholder
+   */
+  getPlaceholderChoice() {
+    const choices = this.getChoices();
+    const values = choices.filter((choice) => {
+      return choice.placeholder === true;
+    }, []);
+
+    return values[0];
+  }
 }
 
 module.exports = Store;
diff --git a/index.html b/index.html
index 90562d5..d70eabb 100644
--- a/index.html
+++ b/index.html
@@ -202,6 +202,7 @@
 
       <label for="choices-single-no-search">Options added via config with no search</label>
       <select class="form-control" name="choices-single-no-search" id="choices-single-no-search">
+        <option selected placeholder disabled>Press here</option>
         <option value="0">Zero</option>
       </select>
 
diff --git a/tests/spec/choices_spec.js b/tests/spec/choices_spec.js
index 8449290..bbf8ae0 100644
--- a/tests/spec/choices_spec.js
+++ b/tests/spec/choices_spec.js
@@ -503,6 +503,27 @@ describe('Choices', () => {
       this.choices = new Choices(this.input, { shouldSort: true });
       expect(this.choices.currentState.choices[0].value).toEqual('Placeholder');
     });
+
+    it('should set placeholder after click on remove item button', function() {
+      const option = document.createElement('option');
+      option.setAttribute('placeholder', '');
+      option.setAttribute('disabled', '');
+      option.innerHTML = 'Placeholder';
+      this.input.appendChild(option);
+
+      this.choices = new Choices(this.input, { removeItemButton: true });
+
+      const removeItemButton = this.choices.containerOuter.querySelector('[data-button]');
+
+      this.choices._onClick({
+        target: removeItemButton,
+        ctrlKey: false,
+        preventDefault: () => {}
+      });
+
+      expect(this.choices.currentState.items[1].value).toBe('Placeholder');
+      expect(this.choices.currentState.items[1].active).toBe(true);
+    });
   });
 
   describe('should accept multiple select inputs', function() {