diff --git a/README.md b/README.md index 4f49648..12a6160 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,7 @@ Or include Choices directly: choices: [], renderChoiceLimit: -1, maxItemCount: -1, + addChoices: false, addItems: true, addItemFilter: null, removeItems: true, @@ -304,6 +305,15 @@ Pass an array of objects: **Usage:** The amount of items a user can input/select ("-1" indicates no limit). +### addChoices +**Type**: `Boolean` **Default:** `false` + +**Input types affected:** `select-multiple`, `select-one` + +**Usage:** Whether a user can add choices + +**Note:** `addItems` must also be `true` + ### addItems **Type:** `Boolean` **Default:** `true` diff --git a/cypress/e2e/select-multiple.spec.ts b/cypress/e2e/select-multiple.spec.ts index c35f781..bade601 100644 --- a/cypress/e2e/select-multiple.spec.ts +++ b/cypress/e2e/select-multiple.spec.ts @@ -1006,6 +1006,24 @@ describe('Choices - select multiple', () => { }); }); }); + + describe('adding user-created choices', () => { + it('allows the user to add choices', () => { + const newChoice = 'New Choice'; + + cy.get('[data-test-hook=add-choices]') + .find('.choices__input--cloned') + .type(newChoice) + .type('{enter}'); + + cy.get('[data-test-hook=add-choices]') + .find('.choices__list--multiple') + .last() + .should($el => { + expect($el).to.contain(newChoice); + }); + }); + }); }); }); }); diff --git a/cypress/e2e/select-one.spec.ts b/cypress/e2e/select-one.spec.ts index 6809dd8..6d5b7cf 100644 --- a/cypress/e2e/select-one.spec.ts +++ b/cypress/e2e/select-one.spec.ts @@ -1145,5 +1145,26 @@ describe('Choices - select one', () => { .should('have.length', 3); }); }); + + describe('adding user-created choices', () => { + beforeEach(() => { + cy.get('[data-test-hook=add-choices]').find('.choices').click(); + }); + + it('allows the user to add choices', () => { + const newChoice = 'New Choice'; + + cy.get('[data-test-hook=add-choices]') + .find('.choices__input--cloned') + .type(newChoice) + .type('{enter}'); + + cy.get('[data-test-hook=add-choices]') + .find('.choices__list--single .choices__item') + .should(($el) => { + expect($el).to.contain(newChoice); + }); + }); + }); }); }); diff --git a/public/test/select-multiple/index.html b/public/test/select-multiple/index.html index e4091e5..5057019 100644 --- a/public/test/select-multiple/index.html +++ b/public/test/select-multiple/index.html @@ -397,6 +397,15 @@ multiple > + +