mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-18 05:26:35 +02:00
test: select-one coverage
This commit is contained in:
viction
parent
859f6262eb
commit
3633c4ac0f
|
|
@ -1,6 +1,10 @@
|
|||
describe('Choices - select one', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/select-one');
|
||||
cy.visit('/select-one', {
|
||||
onBeforeLoad(win) {
|
||||
cy.stub(win.console, 'warn').as('consoleWarn');
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('scenarios', () => {
|
||||
|
|
@ -51,9 +55,7 @@ describe('Choices - select one', () => {
|
|||
describe('selecting choices', () => {
|
||||
beforeEach(() => {
|
||||
// open dropdown
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=basic]').find('.choices').click();
|
||||
});
|
||||
|
||||
const selectedChoiceText = 'Choice 1';
|
||||
|
|
@ -68,7 +70,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -84,7 +86,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -93,9 +95,7 @@ describe('Choices - select one', () => {
|
|||
describe('searching choices', () => {
|
||||
beforeEach(() => {
|
||||
// open dropdown
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=basic]').find('.choices').click();
|
||||
});
|
||||
|
||||
describe('on input', () => {
|
||||
|
|
@ -109,7 +109,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 2');
|
||||
});
|
||||
});
|
||||
|
|
@ -125,7 +125,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 3');
|
||||
});
|
||||
});
|
||||
|
|
@ -140,7 +140,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal('No results found');
|
||||
});
|
||||
|
|
@ -206,7 +206,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
removedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -229,7 +229,7 @@ describe('Choices - select one', () => {
|
|||
it('updates the value of the original input', () => {
|
||||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__input[hidden]')
|
||||
.should($select => {
|
||||
.should(($select) => {
|
||||
const val = $select.val() || [];
|
||||
|
||||
expect(val).to.not.contain(removedChoiceText);
|
||||
|
|
@ -248,7 +248,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
cy.get('[data-test-hook=disabled-choice]')
|
||||
.find('.choices__list--dropdown .choices__item--disabled')
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -258,7 +258,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text()).to.not.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -305,9 +305,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
describe('on click', () => {
|
||||
it('does not open choice dropdown', () => {
|
||||
cy.get('[data-test-hook=disabled-via-attr]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=disabled-via-attr]').find('.choices').click();
|
||||
|
||||
cy.get('[data-test-hook=disabled-via-attr]')
|
||||
.find('.choices__list--dropdown')
|
||||
|
|
@ -335,7 +333,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.last()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -345,7 +343,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.data('value')).to.equal(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
|
|
@ -356,7 +354,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text()).to.not.contain(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
|
|
@ -389,9 +387,7 @@ describe('Choices - select one', () => {
|
|||
const selectedChoiceText = 'Choice 3';
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=search-disabled]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=search-disabled]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('does not display a search input', () => {
|
||||
|
|
@ -410,7 +406,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=search-disabled]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -442,7 +438,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.not.contain(searchTerm);
|
||||
});
|
||||
});
|
||||
|
|
@ -460,7 +456,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.contain(searchTerm);
|
||||
});
|
||||
});
|
||||
|
|
@ -476,7 +472,7 @@ describe('Choices - select one', () => {
|
|||
.children()
|
||||
.first()
|
||||
.should('have.class', 'choices__placeholder')
|
||||
.and($placeholder => {
|
||||
.and(($placeholder) => {
|
||||
expect($placeholder).to.contain('I am a placeholder');
|
||||
});
|
||||
});
|
||||
|
|
@ -524,7 +520,7 @@ describe('Choices - select one', () => {
|
|||
.children()
|
||||
.first()
|
||||
.should('have.class', 'choices__placeholder')
|
||||
.and($placeholder => {
|
||||
.and(($placeholder) => {
|
||||
expect($placeholder).to.contain('I am a placeholder');
|
||||
});
|
||||
});
|
||||
|
|
@ -577,7 +573,7 @@ describe('Choices - select one', () => {
|
|||
.should('have.length', 1)
|
||||
.first()
|
||||
.should('have.class', 'choices__placeholder')
|
||||
.and($placeholder => {
|
||||
.and(($placeholder) => {
|
||||
expect($placeholder).to.contain('Loading...');
|
||||
});
|
||||
});
|
||||
|
|
@ -620,19 +616,17 @@ describe('Choices - select one', () => {
|
|||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__item')
|
||||
.then($choices => {
|
||||
.then(($choices) => {
|
||||
choicesCount = $choices.length;
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=scrolling-dropdown]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('highlights first choice on dropdown open', () => {
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
|
|
@ -641,7 +635,7 @@ describe('Choices - select one', () => {
|
|||
for (let index = 0; index < choicesCount; index++) {
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
|
||||
});
|
||||
|
||||
|
|
@ -665,7 +659,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(`Choice ${index}`);
|
||||
});
|
||||
|
||||
|
|
@ -684,7 +678,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.then($group => {
|
||||
.then(($group) => {
|
||||
groupValue = $group.text().trim();
|
||||
});
|
||||
});
|
||||
|
|
@ -705,7 +699,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.should($group => {
|
||||
.should(($group) => {
|
||||
expect($group.text().trim()).to.not.equal(groupValue);
|
||||
});
|
||||
});
|
||||
|
|
@ -736,7 +730,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.should($group => {
|
||||
.should(($group) => {
|
||||
expect($group.text().trim()).to.equal(groupValue);
|
||||
});
|
||||
});
|
||||
|
|
@ -806,9 +800,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
describe('custom properties', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=custom-properties]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=custom-properties]').find('.choices').click();
|
||||
});
|
||||
|
||||
describe('on input', () => {
|
||||
|
|
@ -837,7 +829,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(city);
|
||||
});
|
||||
|
||||
|
|
@ -851,9 +843,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
describe('non-string values', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=non-string-values]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=non-string-values]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('displays expected amount of choices in dropdown', () => {
|
||||
|
|
@ -869,7 +859,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
$selectedChoice = $choice;
|
||||
})
|
||||
.click();
|
||||
|
|
@ -877,7 +867,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=non-string-values]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item.text().trim()).to.equal($selectedChoice.text().trim());
|
||||
});
|
||||
});
|
||||
|
|
@ -887,7 +877,7 @@ describe('Choices - select one', () => {
|
|||
describe('selecting choice', () => {
|
||||
describe('on enter key', () => {
|
||||
it('does not submit form', () => {
|
||||
cy.get('[data-test-hook=within-form] form').then($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');
|
||||
|
|
@ -900,14 +890,12 @@ describe('Choices - select one', () => {
|
|||
.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').click();
|
||||
|
||||
cy.get('[data-test-hook=within-form]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain('Choice 1');
|
||||
});
|
||||
});
|
||||
|
|
@ -922,7 +910,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=set-choice-by-value]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(
|
||||
dynamicallySelectedChoiceValue,
|
||||
);
|
||||
|
|
@ -932,7 +920,7 @@ describe('Choices - select one', () => {
|
|||
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 => {
|
||||
.then(($choicesList) => {
|
||||
expect($choicesList).to.contain(dynamicallySelectedChoiceValue);
|
||||
});
|
||||
});
|
||||
|
|
@ -940,7 +928,7 @@ describe('Choices - select one', () => {
|
|||
it('updates the value of the original input', () => {
|
||||
cy.get('[data-test-hook=set-choice-by-value]')
|
||||
.find('.choices__input[hidden]')
|
||||
.should($select => {
|
||||
.should(($select) => {
|
||||
const val = $select.val() || [];
|
||||
expect(val).to.contain(dynamicallySelectedChoiceValue);
|
||||
});
|
||||
|
|
@ -949,9 +937,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
describe('searching by label only', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=search-by-label]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=search-by-label]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('gets zero results when searching by value', () => {
|
||||
|
|
@ -963,7 +949,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('No results found');
|
||||
});
|
||||
});
|
||||
|
|
@ -977,7 +963,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('label1');
|
||||
});
|
||||
});
|
||||
|
|
@ -998,7 +984,7 @@ describe('Choices - select one', () => {
|
|||
.children()
|
||||
.first()
|
||||
.should('have.class', 'choices__item--disabled')
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
disabledValue = $choice.val();
|
||||
});
|
||||
});
|
||||
|
|
@ -1006,19 +992,64 @@ describe('Choices - select one', () => {
|
|||
it('selects the first enabled choice', () => {
|
||||
cy.get('[data-test-hook=disabled-first-choice-via-options]')
|
||||
.find('.choices__input[hidden]')
|
||||
.then($option => {
|
||||
.then(($option) => {
|
||||
expect($option.text().trim()).to.not.equal(disabledValue);
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=disabled-first-choice-via-options]')
|
||||
.find('.choices__item.choices__item--selectable')
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.not.equal(disabledValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('allow html', () => {
|
||||
describe('is undefined', () => {
|
||||
it('logs a deprecation warning', () => {
|
||||
cy.get('@consoleWarn').should(
|
||||
'be.calledOnceWithExactly',
|
||||
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.',
|
||||
);
|
||||
});
|
||||
|
||||
it('does not show html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-undefined]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to true', () => {
|
||||
it('does not show html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-true]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to false', () => {
|
||||
it('shows html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-false]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('<b>Choice 1</b>');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('re-initialising a choices instance', () => {
|
||||
it('preserves the choices list', () => {
|
||||
cy.get('[data-test-hook=new-destroy-init]')
|
||||
|
|
@ -1029,9 +1060,7 @@ describe('Choices - select one', () => {
|
|||
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('button.init').click();
|
||||
|
||||
cy.get('[data-test-hook=new-destroy-init]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
|
|
|
|||
|
|
@ -354,6 +354,33 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-undefined">
|
||||
<label for="choices-allowhtml-undefined">HTML allowed by default</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-undefined"
|
||||
id="choices-allowhtml-undefined"
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-true">
|
||||
<label for="choices-allowhtml-true">HTML allowed</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-true"
|
||||
id="choices-allowhtml-true"
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-false">
|
||||
<label for="choices-allowhtml-false">HTML disabled</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-false"
|
||||
id="choices-allowhtml-false"
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="new-destroy-init">
|
||||
<label for="choices-new-destroy-init">New, Destroy, Init</label>
|
||||
<select
|
||||
|
|
@ -372,7 +399,9 @@
|
|||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const choicesBasic = new Choices('#choices-basic');
|
||||
const choicesBasic = new Choices('#choices-basic', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector('button.disable')
|
||||
|
|
@ -387,14 +416,17 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-remove-button', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-choice', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-choice-via-options', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{
|
||||
|
|
@ -418,33 +450,45 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-add-items-disabled', {
|
||||
allowHTML: true,
|
||||
addItems: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-via-attr');
|
||||
new Choices('#choices-disabled-via-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-prepend-append', {
|
||||
allowHTML: true,
|
||||
prependValue: 'before-',
|
||||
appendValue: '-after',
|
||||
});
|
||||
|
||||
new Choices('#choices-render-choice-limit', {
|
||||
allowHTML: true,
|
||||
renderChoiceLimit: 1,
|
||||
});
|
||||
|
||||
new Choices('#choices-search-disabled', {
|
||||
allowHTML: true,
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-search-floor', {
|
||||
allowHTML: true,
|
||||
searchFloor: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-placeholder-via-option-value');
|
||||
new Choices('#choices-placeholder-via-option-value', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-placeholder-via-option-attr');
|
||||
new Choices('#choices-placeholder-via-option-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-remote-data', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
}).setChoices(async () => {
|
||||
const res = await fetch('/data');
|
||||
|
|
@ -452,13 +496,20 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-scrolling-dropdown', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-groups');
|
||||
new Choices('#choices-groups', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
const parent = new Choices('#choices-parent');
|
||||
const child = new Choices('#choices-child').disable();
|
||||
const parent = new Choices('#choices-parent', {
|
||||
allowHTML: true,
|
||||
});
|
||||
const child = new Choices('#choices-child', {
|
||||
allowHTML: true,
|
||||
}).disable();
|
||||
|
||||
parent.passedElement.element.addEventListener('change', event => {
|
||||
if (event.detail.value === 'Parent choice 2') {
|
||||
|
|
@ -469,6 +520,7 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-custom-properties', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label', 'value', 'customProperties.country'],
|
||||
choices: [
|
||||
{
|
||||
|
|
@ -499,6 +551,7 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-non-string-values', {
|
||||
allowHTML: true,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -525,15 +578,69 @@
|
|||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-within-form');
|
||||
new Choices('#choices-within-form', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-set-choice-by-value').setChoiceByValue(
|
||||
'Choice 2',
|
||||
);
|
||||
new Choices('#choices-set-choice-by-value', {
|
||||
allowHTML: true,
|
||||
}).setChoiceByValue('Choice 2');
|
||||
|
||||
new Choices('#choices-search-by-label', { searchFields: ['label'] });
|
||||
new Choices('#choices-search-by-label', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label']
|
||||
});
|
||||
|
||||
const newDestroyInitChoices = new Choices('#choices-new-destroy-init');
|
||||
new Choices('#choices-allowhtml-undefined', {
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Choice 2',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-true', {
|
||||
allowHTML: true,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Choice 2',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-false', {
|
||||
allowHTML: false,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Choice 2',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const newDestroyInitChoices = new Choices('#choices-new-destroy-init', {
|
||||
allowHTML: true,
|
||||
});
|
||||
document
|
||||
.querySelector('button.destroy')
|
||||
.addEventListener('click', () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue