Add e2e test for #1281

Author: Xon

public/test/select-multiple/index.html

@@ -1107,6 +1107,27 @@ <h2>Select multiple inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="clear-on-add">
+          <label for="choices-clear-on-add">Clear choices on add item</label>
+          <select
+            class="form-control"
+            name="choices-clear-on-add"
+            id="choices-clear-on-add"
+            multiple
+          >
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              const choices = new Choices('#choices-clear-on-add', {});
+              choices.passedElement.element.addEventListener("addItem", function () {
+                choices.clearChoices()
+                choices.hideDropdown()
+              })
+            });
+          </script>
+        </div>
 
       </div>
     </div>

public/test/select-one/index.html

@@ -1108,6 +1108,27 @@ <h2>Select one inputs</h2>
         </script>
       </div>
 
+        <div data-test-hook="clear-on-add">
+          <label for="choices-clear-on-add">Clear choices on add item</label>
+          <select
+            class="form-control"
+            name="choices-clear-on-add"
+            id="choices-clear-on-add"
+          >
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              const choices = new Choices('#choices-clear-on-add', {});
+              choices.passedElement.element.addEventListener("addItem", function () {
+                choices.clearChoices()
+                choices.hideDropdown()
+              })
+            });
+          </script>
+        </div>
+
       </div>
     </div>
   </body>

test-e2e/tests/select-multiple.spec.ts

@@ -1034,5 +1034,27 @@ describe(`Choices - select multiple`, () => {
         await suite.expectVisibleNoticeHtml('No choices to choose from');
       });
     });
+
+    describe('Clear choices on add item', () => {
+      const testId = 'clear-on-add';
+      test('Expected items', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+        await suite.startWithClick();
+        await suite.expectChoiceCount(2);
+
+        await suite.choices.first().click();
+        await suite.advanceClock();
+        await suite.expectHiddenDropdown();
+        await suite.expectedItemCount(1);
+
+        await suite.wrapper.click();
+        await suite.advanceClock();
+        await suite.expectVisibleNoticeHtml('No choices to choose from', false);
+
+        await suite.keyPress('Backspace');
+        await suite.expectedItemCount(0);
+        await suite.expectChoiceCount(1);
+      });
+    });
   });
 });

test-e2e/tests/select-one.spec.ts

@@ -977,5 +977,19 @@ describe(`Choices - select one`, () => {
         await suite.expectVisibleNoticeHtml('No choices to choose from');
       });
     });
+
+    describe('Clear choices on add item', () => {
+      const testId = 'clear-on-add';
+      test('Expected items', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+        await suite.startWithClick();
+        await suite.expectChoiceCount(2);
+
+        await suite.choices.last().click();
+        await suite.advanceClock();
+        await suite.expectedItemCount(1);
+        await suite.expectChoiceCount(1);
+      });
+    });
   });
 });