Fix form submission bug in firefox (#470)

* Fix form submission bug in firefox

* 4.1.1

cypress/integration/select-multiple.spec.js

@@ -791,5 +791,32 @@ describe('Choices - select multiple', () => {
         });
       });
     });
+
+    describe('within form', () => {
+      describe('selecting choice', () => {
+        describe('on enter key', () => {
+          it('does not submit form', () => {
+            cy.get('[data-test-hook=within-form] form').then($form => {
+              $form.submit(() => {
+                // this will fail the test if the form submits
+                throw new Error('Form submitted');
+              });
+            });
+
+            cy.get('[data-test-hook=within-form]')
+              .find('.choices__input--cloned')
+              .focus()
+              .type('{enter}');
+
+            cy.get('[data-test-hook=within-form]')
+              .find('.choices__list--multiple .choices__item')
+              .last()
+              .should($item => {
+                expect($item).to.contain('Choice 1');
+              });
+          });
+        });
+      });
+    });
   });
 });

cypress/integration/select-one.spec.js

@@ -803,5 +803,37 @@ describe('Choices - select one', () => {
         });
       });
     });
+
+    describe('within form', () => {
+      describe('selecting choice', () => {
+        describe('on enter key', () => {
+          it('does not submit form', () => {
+            cy.get('[data-test-hook=within-form] form').then($form => {
+              $form.submit(() => {
+                // this will fail the test if the form submits
+                throw new Error('Form submitted');
+              });
+            });
+
+            cy.get('[data-test-hook=within-form]')
+              .find('.choices')
+              .click()
+              .find('.choices__input--cloned')
+              .type('{enter}');
+
+            cy.get('[data-test-hook=within-form]')
+              .find('.choices')
+              .click();
+
+            cy.get('[data-test-hook=within-form]')
+              .find('.choices__list--single .choices__item')
+              .last()
+              .should($item => {
+                expect($item).to.contain('Choice 1');
+              });
+          });
+        });
+      });
+    });
   });
 });

cypress/integration/text.spec.js

@@ -225,7 +225,7 @@ describe('Choices - text element', () => {
     });
 
     describe('regex filter', () => {
-      describe('a valid that satisfies regex', () => {
+      describe('inputting a value that satisfies the regex', () => {
         const input = 'joe@bloggs.com';
 
         it('allows me to add choice', () => {
@@ -340,5 +340,32 @@ describe('Choices - text element', () => {
         });
       });
     });
+
+    describe('within form', () => {
+      describe('inputting item', () => {
+        describe('on enter key', () => {
+          it('does not submit form', () => {
+            cy.get('[data-test-hook=within-form] form').then($form => {
+              $form.submit(() => {
+                // this will fail the test if the form submits
+                throw new Error('Form submitted');
+              });
+            });
+
+            cy.get('[data-test-hook=within-form]')
+              .find('.choices__input--cloned')
+              .type(textInput)
+              .type('{enter}');
+
+            cy.get('[data-test-hook=within-form]')
+              .find('.choices__list--multiple .choices__item')
+              .last()
+              .should($el => {
+                expect($el).to.contain(textInput);
+              });
+          });
+        });
+      });
+    });
   });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.min.js",
   "types": "./types/index.d.ts",
@@ -62,7 +62,7 @@
     "babel-preset-stage-2": "^6.24.1",
     "chai": "^4.1.0",
     "csso": "^1.8.2",
-    "cypress": "^3.1.1",
+    "cypress": "^3.1.2",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-config-prettier": "^2.9.0",

public/test/select-multiple.html

@@ -176,6 +176,15 @@
           <label for="choices-custom-properties">Custom properties</label>
           <select class="form-control" name="choices-custom-properties" id="choices-custom-properties" multiple></select>
         </div>
+
+        <div data-test-hook="within-form">
+          <form>
+            <label for="choices-within-form">Within form</label>
+            <select class="form-control" name="choices-within-form" id="choices-within-form" multiple>
+              <option value="Choice 1">Choice 1</option>
+            </select>
+          </form>
+        </div>
       </div>
     </div>
     <script>
@@ -285,6 +294,8 @@
             }
           ]
         });
+
+        new Choices('#choices-within-form');
       });
     </script>
   </body>

public/test/select-one.html

@@ -180,6 +180,15 @@
           <label for="choices-custom-properties">Custom properties</label>
           <select class="form-control" name="choices-custom-properties" id="choices-custom-properties"></select>
         </div>
+
+        <div data-test-hook="within-form">
+          <form>
+            <label for="choices-within-form">Within form</label>
+            <select class="form-control" name="choices-within-form" id="choices-within-form">
+              <option value="Choice 1">Choice 1</option>
+            </select>
+          </form>
+        </div>
       </div>
     </div>
     <script>
@@ -297,6 +306,8 @@
             }
           ]
         });
+
+        new Choices('#choices-within-form');
       });
     </script>
   </body>

public/test/text.html

@@ -83,6 +83,13 @@
           <label for="choices-placeholder">Placeholder</label>
           <input class="form-control" id="choices-placeholder" type="text">
         </div>
+
+        <div data-test-hook="within-form">
+          <form>
+            <label for="choices-within-form">Within form</label>
+            <input class="form-control" id="choices-within-form" type="text">
+          </form>
+        </div>
       </div>
     </div>
     <script>
@@ -134,6 +141,8 @@
           placeholder: true,
           placeholderValue: 'I am a placeholder',
         });
+
+        new Choices('#choices-within-form');
       });
     </script>
   </body>

src/scripts/choices.js

@@ -1149,6 +1149,7 @@ class Choices {
     // If keycode has a function, run it
     if (keyDownActions[keyCode]) {
       keyDownActions[keyCode]({
+        event,
         target,
         keyCode,
         metaKey,
@@ -1220,7 +1221,7 @@ class Choices {
     }
   }
 
-  _onEnterKey({ target, activeItems, hasActiveDropdown }) {
+  _onEnterKey({ event, target, activeItems, hasActiveDropdown }) {
     const { ENTER_KEY: enterKey } = KEY_CODES;
     // If enter key is pressed and the input has a value
     if (this._isTextElement && target.value) {
@@ -1270,7 +1271,7 @@ class Choices {
     }
   }
 
-  _onDirectionKey({ hasActiveDropdown, keyCode, metaKey }) {
+  _onDirectionKey({ event, hasActiveDropdown, keyCode, metaKey }) {
     const {
       DOWN_KEY: downKey,
       PAGE_UP_KEY: pageUpKey,
@@ -1333,7 +1334,7 @@ class Choices {
     }
   }
 
-  _onDeleteKey({ target, hasFocusedInput, activeItems }) {
+  _onDeleteKey({ event, target, hasFocusedInput, activeItems }) {
     // If backspace or delete key is pressed and the input has no value
     if (hasFocusedInput && !target.value && !this._isSelectOneElement) {
       this._handleBackspace(activeItems);