mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-23 16:02:21 +02:00
Fix form submission bug in firefox (#470)
* Fix form submission bug in firefox * 4.1.1
This commit is contained in:
parent
bded79386f
commit
c3e46e55aa
|
@ -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');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -225,7 +225,7 @@ describe('Choices - text element', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('regex filter', () => {
|
describe('regex filter', () => {
|
||||||
describe('a valid that satisfies regex', () => {
|
describe('inputting a value that satisfies the regex', () => {
|
||||||
const input = 'joe@bloggs.com';
|
const input = 'joe@bloggs.com';
|
||||||
|
|
||||||
it('allows me to add choice', () => {
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "choices.js",
|
"name": "choices.js",
|
||||||
"version": "4.1.0",
|
"version": "4.1.1",
|
||||||
"description": "A vanilla JS customisable text input/select box plugin",
|
"description": "A vanilla JS customisable text input/select box plugin",
|
||||||
"main": "./public/assets/scripts/choices.min.js",
|
"main": "./public/assets/scripts/choices.min.js",
|
||||||
"types": "./types/index.d.ts",
|
"types": "./types/index.d.ts",
|
||||||
|
@ -62,7 +62,7 @@
|
||||||
"babel-preset-stage-2": "^6.24.1",
|
"babel-preset-stage-2": "^6.24.1",
|
||||||
"chai": "^4.1.0",
|
"chai": "^4.1.0",
|
||||||
"csso": "^1.8.2",
|
"csso": "^1.8.2",
|
||||||
"cypress": "^3.1.1",
|
"cypress": "^3.1.2",
|
||||||
"eslint": "^3.19.0",
|
"eslint": "^3.19.0",
|
||||||
"eslint-config-airbnb": "^15.1.0",
|
"eslint-config-airbnb": "^15.1.0",
|
||||||
"eslint-config-prettier": "^2.9.0",
|
"eslint-config-prettier": "^2.9.0",
|
||||||
|
|
|
@ -176,6 +176,15 @@
|
||||||
<label for="choices-custom-properties">Custom properties</label>
|
<label for="choices-custom-properties">Custom properties</label>
|
||||||
<select class="form-control" name="choices-custom-properties" id="choices-custom-properties" multiple></select>
|
<select class="form-control" name="choices-custom-properties" id="choices-custom-properties" multiple></select>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -285,6 +294,8 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
new Choices('#choices-within-form');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -180,6 +180,15 @@
|
||||||
<label for="choices-custom-properties">Custom properties</label>
|
<label for="choices-custom-properties">Custom properties</label>
|
||||||
<select class="form-control" name="choices-custom-properties" id="choices-custom-properties"></select>
|
<select class="form-control" name="choices-custom-properties" id="choices-custom-properties"></select>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -297,6 +306,8 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
new Choices('#choices-within-form');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -83,6 +83,13 @@
|
||||||
<label for="choices-placeholder">Placeholder</label>
|
<label for="choices-placeholder">Placeholder</label>
|
||||||
<input class="form-control" id="choices-placeholder" type="text">
|
<input class="form-control" id="choices-placeholder" type="text">
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -134,6 +141,8 @@
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: 'I am a placeholder',
|
placeholderValue: 'I am a placeholder',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
new Choices('#choices-within-form');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -1149,6 +1149,7 @@ class Choices {
|
||||||
// If keycode has a function, run it
|
// If keycode has a function, run it
|
||||||
if (keyDownActions[keyCode]) {
|
if (keyDownActions[keyCode]) {
|
||||||
keyDownActions[keyCode]({
|
keyDownActions[keyCode]({
|
||||||
|
event,
|
||||||
target,
|
target,
|
||||||
keyCode,
|
keyCode,
|
||||||
metaKey,
|
metaKey,
|
||||||
|
@ -1220,7 +1221,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_onEnterKey({ target, activeItems, hasActiveDropdown }) {
|
_onEnterKey({ event, target, activeItems, hasActiveDropdown }) {
|
||||||
const { ENTER_KEY: enterKey } = KEY_CODES;
|
const { ENTER_KEY: enterKey } = KEY_CODES;
|
||||||
// If enter key is pressed and the input has a value
|
// If enter key is pressed and the input has a value
|
||||||
if (this._isTextElement && target.value) {
|
if (this._isTextElement && target.value) {
|
||||||
|
@ -1270,7 +1271,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_onDirectionKey({ hasActiveDropdown, keyCode, metaKey }) {
|
_onDirectionKey({ event, hasActiveDropdown, keyCode, metaKey }) {
|
||||||
const {
|
const {
|
||||||
DOWN_KEY: downKey,
|
DOWN_KEY: downKey,
|
||||||
PAGE_UP_KEY: pageUpKey,
|
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 backspace or delete key is pressed and the input has no value
|
||||||
if (hasFocusedInput && !target.value && !this._isSelectOneElement) {
|
if (hasFocusedInput && !target.value && !this._isSelectOneElement) {
|
||||||
this._handleBackspace(activeItems);
|
this._handleBackspace(activeItems);
|
||||||
|
|
Loading…
Reference in a new issue