* add specs

* fix to restore preset choices after destroy

* avoid to modify `this.config.choices` directly

* Update cypress/integration/select-one.spec.js

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* fix specs

* restoring passed element initial options

 - Save `passedElement.options` values as `this._presetOptions`
 - Restore saved `this._presetOptions` to `passedElement.options` on `destroy`
 - It avoids restoring options in `this.config.choices`

* Update cypress/integration/select-one.spec.js

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update cypress/integration/select-one.spec.js

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* Update public/test/select-one.html

Co-Authored-By: Josh Johnson <josh@joshuajohnson.co.uk>

* move preset options assignment statement
This commit is contained in:
Kazuki Nishikawa 2019-11-17 21:34:34 +09:00 committed by Josh Johnson
parent e7b4afd472
commit 0e8e42e015
3 changed files with 64 additions and 2 deletions

View file

@ -1022,5 +1022,39 @@ describe('Choices - select one', () => {
});
});
});
describe('re-initialising a choices instance', () => {
it('preserves the choices list', () => {
cy.get('[data-test-hook=new-destroy-init]')
.find('.choices__list--dropdown .choices__list')
.children()
.should('have.length', 3);
cy.get('[data-test-hook=new-destroy-init]')
.find('button.destroy')
.click();
cy.get('[data-test-hook=new-destroy-init]')
.find('button.init')
.click();
cy.get('[data-test-hook=new-destroy-init]')
.find('.choices__list--dropdown .choices__list')
.children()
.should('have.length', 3);
});
});
describe('destroying the choices instance', () => {
it('preserves the original select element', () => {
cy.get('[data-test-hook=new-destroy-init]')
.find('button.destroy')
.click();
cy.get('[data-test-hook=new-destroy-init]')
.find('select')
.children()
.should('have.length', 3);
});
});
});
});

View file

@ -359,6 +359,21 @@
<option value="value2">label2</option>
</select>
</div>
<div data-test-hook="new-destroy-init">
<label for="choices-new-destroy-init">New, Destroy, Init</label>
<select
class="form-control"
name="choices-new-destroy-init"
id="choices-new-destroy-init"
>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
<button class="destroy">Destroy</button>
<button class="init">Init</button>
</div>
</div>
</div>
<script>
@ -523,6 +538,16 @@
);
new Choices('#choices-search-by-label', { searchFields: ['label'] });
const newDestroyInitChoices = new Choices('#choices-new-destroy-init');
document
.querySelector('button.destroy')
.addEventListener('click', () => {
newDestroyInitChoices.destroy();
});
document.querySelector('button.init').addEventListener('click', () => {
newDestroyInitChoices.init();
});
});
</script>
</body>

View file

@ -183,6 +183,8 @@ class Choices {
};
// Assign preset groups from passed element
this._presetGroups = this.passedElement.optionGroups;
// Assign preset options from passed element
this._presetOptions = this.passedElement.options;
// Assign preset choices from passed object
this._presetChoices = this.config.choices;
// Assign preset items from passed object first
@ -283,11 +285,12 @@ class Choices {
this.passedElement.reveal();
this.containerOuter.unwrap(this.passedElement.element);
this.clearStore();
if (this._isSelectElement) {
this.passedElement.options = this._presetChoices;
this.passedElement.options = this._presetOptions;
}
this.clearStore();
this._templates = null;
this.initialised = false;
}