Fix set choice by value bug (#471)

* Resolve bug with setChoiceByValue not removing choice from dropdown

* 4.1.3

* Version 4.1.3

cypress/integration/select-multiple.spec.js

@@ -818,5 +818,40 @@ describe('Choices - select multiple', () => {
         });
       });
     });
+
+    describe('dynamically setting choice by value', () => {
+      const dynamicallySelectedChoiceValue = 'Choice 2';
+
+      it('selects choice', () => {
+        cy.get('[data-test-hook=set-choice-by-value]')
+          .find('.choices__list--multiple .choices__item')
+          .last()
+          .should($choice => {
+            expect($choice.text().trim()).to.equal(
+              dynamicallySelectedChoiceValue,
+            );
+          });
+      });
+
+      it('removes choice from dropdown list', () => {
+        cy.get('[data-test-hook=set-choice-by-value]')
+          .find('.choices__list--dropdown .choices__list')
+          .children()
+          .each($choice => {
+            expect($choice.text().trim()).to.not.equal(
+              dynamicallySelectedChoiceValue,
+            );
+          });
+      });
+
+      it('updates the value of the original input', () => {
+        cy.get('[data-test-hook=set-choice-by-value]')
+          .find('.choices__input.is-hidden')
+          .should($select => {
+            const val = $select.val() || [];
+            expect(val).to.contain(dynamicallySelectedChoiceValue);
+          });
+      });
+    });
   });
 });

cypress/integration/select-one.spec.js

@@ -835,5 +835,37 @@ describe('Choices - select one', () => {
         });
       });
     });
+
+    describe('dynamically setting choice by value', () => {
+      const dynamicallySelectedChoiceValue = 'Choice 2';
+
+      it('selects choice', () => {
+        cy.get('[data-test-hook=set-choice-by-value]')
+          .find('.choices__list--single .choices__item')
+          .last()
+          .should($choice => {
+            expect($choice.text().trim()).to.equal(
+              dynamicallySelectedChoiceValue,
+            );
+          });
+      });
+
+      it('does not remove choice from dropdown list', () => {
+        cy.get('[data-test-hook=set-choice-by-value]')
+          .find('.choices__list--dropdown .choices__list')
+          .then($choicesList => {
+            expect($choicesList).to.contain(dynamicallySelectedChoiceValue);
+          });
+      });
+
+      it('updates the value of the original input', () => {
+        cy.get('[data-test-hook=set-choice-by-value]')
+          .find('.choices__input.is-hidden')
+          .should($select => {
+            const val = $select.val() || [];
+            expect(val).to.contain(dynamicallySelectedChoiceValue);
+          });
+      });
+    });
   });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.min.js",
   "types": "./types/index.d.ts",
@@ -24,9 +24,9 @@
     "css:sass": "node-sass --output-style expanded --include-path  scss src/styles/base.scss public/assets/styles/base.css && node-sass --output-style expanded --include-path scss src/styles/choices.scss public/assets/styles/choices.css",
     "css:prefix": "postcss --use autoprefixer -b 'last 2 versions' public/assets/styles/*.css -d public/assets/styles",
     "css:min": "csso public/assets/styles/base.css public/assets/styles/base.min.css && csso public/assets/styles/choices.css public/assets/styles/choices.min.css",
-    "bump-version": "node bump-version.js --current $npm_package_version",
+    "bump-cache": "node bump-cache.js --current $npm_package_version",
     "deploy": "git subtree push --prefix public origin gh-pages",
-    "postversion": "npm run js:build",
+    "postversion": "npm run js:build && npm run bump-cache",
     "prepush": "run-p lint test:unit"
   },
   "repository": {

public/index.html

@@ -16,16 +16,16 @@
   <meta name="theme-color" content="#ffffff">
 
   <!-- Ignore these -->
-  <link rel="stylesheet" href="assets/styles/base.min.css?version=4.1.2">
+  <link rel="stylesheet" href="assets/styles/base.min.css?version=4.1.3">
   <!-- End ignore these -->
 
   <!-- Optional includes -->
   <script src="https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild,Object.assign"></script>
   <!-- End optional includes -->
 
   <!-- Choices includes -->
-  <link rel="stylesheet" href="assets/styles/choices.min.css?version=4.1.2">
-  <script src="assets/scripts/choices.min.js?version=4.1.2"></script>
+  <link rel="stylesheet" href="assets/styles/choices.min.css?version=4.1.3">
+  <script src="assets/scripts/choices.min.js?version=4.1.3"></script>
   <!-- End Choices includes -->
 
   <!--[if lt IE 9]>

public/test/select-multiple.html

@@ -185,6 +185,15 @@ <h2>Select multiple inputs</h2>
             </select>
           </form>
         </div>
+
+        <div data-test-hook="set-choice-by-value">
+          <label for="choices-set-choice-by-value">Dynamically set choice by value</label>
+          <select class="form-control" name="choices-set-choice-by-value" id="choices-set-choice-by-value" multiple>
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+        </div>
       </div>
     </div>
     <script>
@@ -296,6 +305,8 @@ <h2>Select multiple inputs</h2>
         });
 
         new Choices('#choices-within-form');
+
+        new Choices('#choices-set-choice-by-value').setChoiceByValue('Choice 2');
       });
     </script>
   </body>

public/test/select-one.html

@@ -189,6 +189,15 @@ <h2>Select one inputs</h2>
             </select>
           </form>
         </div>
+
+        <div data-test-hook="set-choice-by-value">
+          <label for="choices-set-choice-by-value">Dynamically set choice by value</label>
+          <select class="form-control" name="choices-set-choice-by-value" id="choices-set-choice-by-value">
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+        </div>
       </div>
     </div>
     <script>
@@ -308,6 +317,8 @@ <h2>Select one inputs</h2>
         });
 
         new Choices('#choices-within-form');
+
+        new Choices('#choices-set-choice-by-value').setChoiceByValue('Choice 2');
       });
     </script>
   </body>

src/scripts/choices.js

@@ -1628,24 +1628,14 @@ class Choices {
     }
 
     // Trigger change event
-    if (group && group.value) {
-      this.passedElement.triggerEvent(EVENTS.addItem, {
-        id,
-        value: passedValue,
-        label: passedLabel,
-        customProperties: passedCustomProperties,
-        groupValue: group.value,
-        keyCode: passedKeyCode,
-      });
-    } else {
-      this.passedElement.triggerEvent(EVENTS.addItem, {
-        id,
-        value: passedValue,
-        label: passedLabel,
-        customProperties: passedCustomProperties,
-        keyCode: passedKeyCode,
-      });
-    }
+    this.passedElement.triggerEvent(EVENTS.addItem, {
+      id,
+      value: passedValue,
+      label: passedLabel,
+      customProperties: passedCustomProperties,
+      groupValue: group && group.value ? group.value : undefined,
+      keyCode: passedKeyCode,
+    });
 
     return this;
   }
@@ -2044,7 +2034,7 @@ class Choices {
       this._addItem({
         value: foundChoice.value,
         label: foundChoice.label,
-        id: foundChoice.id,
+        choiceId: foundChoice.id,
         groupId: foundChoice.groupId,
         customProperties: foundChoice.customProperties,
         placeholder: foundChoice.placeholder,