set placeholder choice as active after click on remove item button in single select mode

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);
+        }
+      }
     }
   }
 

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;

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>
 

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() {