diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js index 7ade622..3a35bf2 100644 --- a/cypress/integration/select-multiple.spec.js +++ b/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'); + }); + }); + }); + }); + }); }); }); diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js index 8963c4f..7fc6513 100644 --- a/cypress/integration/select-one.spec.js +++ b/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'); + }); + }); + }); + }); + }); }); }); diff --git a/cypress/integration/text.spec.js b/cypress/integration/text.spec.js index e57e78d..b65ce34 100644 --- a/cypress/integration/text.spec.js +++ b/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); + }); + }); + }); + }); + }); }); }); diff --git a/package.json b/package.json index 61f2b40..77a6fda 100644 --- a/package.json +++ b/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", diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html index eb24cac..54e0561 100644 --- a/public/test/select-multiple.html +++ b/public/test/select-multiple.html @@ -176,6 +176,15 @@ + +
+
+ + +
+
diff --git a/public/test/select-one.html b/public/test/select-one.html index 89a9359..5772c26 100644 --- a/public/test/select-one.html +++ b/public/test/select-one.html @@ -180,6 +180,15 @@ + +
+
+ + +
+
diff --git a/public/test/text.html b/public/test/text.html index 0576325..cc5d648 100644 --- a/public/test/text.html +++ b/public/test/text.html @@ -83,6 +83,13 @@ + +
+
+ + +
+
diff --git a/src/scripts/choices.js b/src/scripts/choices.js index 3955777..809de1c 100644 --- a/src/scripts/choices.js +++ b/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);