mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-03 22:33:12 +02:00
Fix set choice by value bug (#471)
* Resolve bug with setChoiceByValue not removing choice from dropdown * 4.1.3 * Version 4.1.3
This commit is contained in:
parent
16e16a181c
commit
826384b9d5
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "choices.js",
|
"name": "choices.js",
|
||||||
"version": "4.1.2",
|
"version": "4.1.3",
|
||||||
"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",
|
||||||
|
@ -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: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: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",
|
"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",
|
"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"
|
"prepush": "run-p lint test:unit"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
/*! choices.js v4.1.2 | (c) 2018 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
/*! choices.js v4.1.3 | (c) 2018 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
||||||
(function webpackUniversalModuleDefinition(root, factory) {
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
//CommonJS2
|
//CommonJS2
|
||||||
if(typeof exports === 'object' && typeof module === 'object')
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
|
@ -3751,24 +3751,14 @@ var Choices = function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Trigger change event
|
// Trigger change event
|
||||||
if (group && group.value) {
|
this.passedElement.triggerEvent(_constants.EVENTS.addItem, {
|
||||||
this.passedElement.triggerEvent(_constants.EVENTS.addItem, {
|
id: id,
|
||||||
id: id,
|
value: passedValue,
|
||||||
value: passedValue,
|
label: passedLabel,
|
||||||
label: passedLabel,
|
customProperties: passedCustomProperties,
|
||||||
customProperties: passedCustomProperties,
|
groupValue: group && group.value ? group.value : undefined,
|
||||||
groupValue: group.value,
|
keyCode: passedKeyCode
|
||||||
keyCode: passedKeyCode
|
});
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.passedElement.triggerEvent(_constants.EVENTS.addItem, {
|
|
||||||
id: id,
|
|
||||||
value: passedValue,
|
|
||||||
label: passedLabel,
|
|
||||||
customProperties: passedCustomProperties,
|
|
||||||
keyCode: passedKeyCode
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -4202,7 +4192,7 @@ var Choices = function () {
|
||||||
this._addItem({
|
this._addItem({
|
||||||
value: foundChoice.value,
|
value: foundChoice.value,
|
||||||
label: foundChoice.label,
|
label: foundChoice.label,
|
||||||
id: foundChoice.id,
|
choiceId: foundChoice.id,
|
||||||
groupId: foundChoice.groupId,
|
groupId: foundChoice.groupId,
|
||||||
customProperties: foundChoice.customProperties,
|
customProperties: foundChoice.customProperties,
|
||||||
placeholder: foundChoice.placeholder,
|
placeholder: foundChoice.placeholder,
|
||||||
|
|
File diff suppressed because one or more lines are too long
4
public/assets/scripts/choices.min.js
vendored
4
public/assets/scripts/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -16,7 +16,7 @@
|
||||||
<meta name="theme-color" content="#ffffff">
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
|
||||||
<!-- Ignore these -->
|
<!-- 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 -->
|
<!-- End ignore these -->
|
||||||
|
|
||||||
<!-- Optional includes -->
|
<!-- Optional includes -->
|
||||||
|
@ -24,8 +24,8 @@
|
||||||
<!-- End optional includes -->
|
<!-- End optional includes -->
|
||||||
|
|
||||||
<!-- Choices includes -->
|
<!-- Choices includes -->
|
||||||
<link rel="stylesheet" href="assets/styles/choices.min.css?version=4.1.2">
|
<link rel="stylesheet" href="assets/styles/choices.min.css?version=4.1.3">
|
||||||
<script src="assets/scripts/choices.min.js?version=4.1.2"></script>
|
<script src="assets/scripts/choices.min.js?version=4.1.3"></script>
|
||||||
<!-- End Choices includes -->
|
<!-- End Choices includes -->
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
|
|
|
@ -185,6 +185,15 @@
|
||||||
</select>
|
</select>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -296,6 +305,8 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
new Choices('#choices-within-form');
|
new Choices('#choices-within-form');
|
||||||
|
|
||||||
|
new Choices('#choices-set-choice-by-value').setChoiceByValue('Choice 2');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -189,6 +189,15 @@
|
||||||
</select>
|
</select>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -308,6 +317,8 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
new Choices('#choices-within-form');
|
new Choices('#choices-within-form');
|
||||||
|
|
||||||
|
new Choices('#choices-set-choice-by-value').setChoiceByValue('Choice 2');
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -1628,24 +1628,14 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Trigger change event
|
// Trigger change event
|
||||||
if (group && group.value) {
|
this.passedElement.triggerEvent(EVENTS.addItem, {
|
||||||
this.passedElement.triggerEvent(EVENTS.addItem, {
|
id,
|
||||||
id,
|
value: passedValue,
|
||||||
value: passedValue,
|
label: passedLabel,
|
||||||
label: passedLabel,
|
customProperties: passedCustomProperties,
|
||||||
customProperties: passedCustomProperties,
|
groupValue: group && group.value ? group.value : undefined,
|
||||||
groupValue: group.value,
|
keyCode: passedKeyCode,
|
||||||
keyCode: passedKeyCode,
|
});
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.passedElement.triggerEvent(EVENTS.addItem, {
|
|
||||||
id,
|
|
||||||
value: passedValue,
|
|
||||||
label: passedLabel,
|
|
||||||
customProperties: passedCustomProperties,
|
|
||||||
keyCode: passedKeyCode,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -2044,7 +2034,7 @@ class Choices {
|
||||||
this._addItem({
|
this._addItem({
|
||||||
value: foundChoice.value,
|
value: foundChoice.value,
|
||||||
label: foundChoice.label,
|
label: foundChoice.label,
|
||||||
id: foundChoice.id,
|
choiceId: foundChoice.id,
|
||||||
groupId: foundChoice.groupId,
|
groupId: foundChoice.groupId,
|
||||||
customProperties: foundChoice.customProperties,
|
customProperties: foundChoice.customProperties,
|
||||||
placeholder: foundChoice.placeholder,
|
placeholder: foundChoice.placeholder,
|
||||||
|
|
Loading…
Reference in a new issue