Resolve bug with setChoiceByValue not removing choice from dropdown

This commit is contained in:
Josh Johnson 2018-11-25 12:41:58 +00:00
parent 16e16a181c
commit e968989b6b
5 changed files with 98 additions and 19 deletions

View file

@ -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);
});
});
});
});
});

View file

@ -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);
});
});
});
});
});

View file

@ -185,6 +185,15 @@
</select>
</form>
</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>
<script>
@ -296,6 +305,8 @@
});
new Choices('#choices-within-form');
new Choices('#choices-set-choice-by-value').setChoiceByValue('Choice 2');
});
</script>
</body>

View file

@ -189,6 +189,15 @@
</select>
</form>
</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>
<script>
@ -308,6 +317,8 @@
});
new Choices('#choices-within-form');
new Choices('#choices-set-choice-by-value').setChoiceByValue('Choice 2');
});
</script>
</body>

View file

@ -1628,24 +1628,14 @@ class Choices {
}
// Trigger change event
if (group && group.value) {
this.passedElement.triggerEvent(EVENTS.addItem, {
id,
value: passedValue,
label: passedLabel,
customProperties: passedCustomProperties,
groupValue: group.value,
keyCode: passedKeyCode,
});
} else {
this.passedElement.triggerEvent(EVENTS.addItem, {
id,
value: passedValue,
label: passedLabel,
customProperties: passedCustomProperties,
keyCode: passedKeyCode,
});
}
this.passedElement.triggerEvent(EVENTS.addItem, {
id,
value: passedValue,
label: passedLabel,
customProperties: passedCustomProperties,
groupValue: group && group.value ? group.value : undefined,
keyCode: passedKeyCode,
});
return this;
}
@ -2044,7 +2034,7 @@ class Choices {
this._addItem({
value: foundChoice.value,
label: foundChoice.label,
id: foundChoice.id,
choiceId: foundChoice.id,
groupId: foundChoice.groupId,
customProperties: foundChoice.customProperties,
placeholder: foundChoice.placeholder,