mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-06 07:43:12 +02:00
* 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:
parent
e7b4afd472
commit
0e8e42e015
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -359,6 +359,21 @@
|
||||||
<option value="value2">label2</option>
|
<option value="value2">label2</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -523,6 +538,16 @@
|
||||||
);
|
);
|
||||||
|
|
||||||
new Choices('#choices-search-by-label', { searchFields: ['label'] });
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -183,6 +183,8 @@ class Choices {
|
||||||
};
|
};
|
||||||
// Assign preset groups from passed element
|
// Assign preset groups from passed element
|
||||||
this._presetGroups = this.passedElement.optionGroups;
|
this._presetGroups = this.passedElement.optionGroups;
|
||||||
|
// Assign preset options from passed element
|
||||||
|
this._presetOptions = this.passedElement.options;
|
||||||
// Assign preset choices from passed object
|
// Assign preset choices from passed object
|
||||||
this._presetChoices = this.config.choices;
|
this._presetChoices = this.config.choices;
|
||||||
// Assign preset items from passed object first
|
// Assign preset items from passed object first
|
||||||
|
@ -283,11 +285,12 @@ class Choices {
|
||||||
this.passedElement.reveal();
|
this.passedElement.reveal();
|
||||||
this.containerOuter.unwrap(this.passedElement.element);
|
this.containerOuter.unwrap(this.passedElement.element);
|
||||||
|
|
||||||
|
this.clearStore();
|
||||||
|
|
||||||
if (this._isSelectElement) {
|
if (this._isSelectElement) {
|
||||||
this.passedElement.options = this._presetChoices;
|
this.passedElement.options = this._presetOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.clearStore();
|
|
||||||
this._templates = null;
|
this._templates = null;
|
||||||
this.initialised = false;
|
this.initialised = false;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue