diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js
index e160858..1402aec 100644
--- a/cypress/integration/select-multiple.spec.js
+++ b/cypress/integration/select-multiple.spec.js
@@ -321,6 +321,49 @@ describe('Choices - select multiple', () => {
});
});
+ describe('disabled via attribute', () => {
+ beforeEach(() => {
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices')
+ .click();
+ });
+
+ it('disables the search input', () => {
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices__input--cloned')
+ .should('be.disabled');
+ });
+
+ describe('on click', () => {
+ it('opens choice dropdown', () => {
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices__list--dropdown')
+ .should('be.visible');
+ });
+ });
+
+ describe('attempting to select choice', () => {
+ let selectedChoice;
+
+ it('does not select choice', () => {
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices__list--dropdown .choices__item')
+ .last()
+ .then($lastChoice => {
+ selectedChoice = $lastChoice;
+ })
+ .click();
+
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices__list--multiple .choices__item')
+ .last()
+ .should($item => {
+ expect($item.text()).to.not.contain(selectedChoice.text());
+ });
+ });
+ });
+ });
+
describe('selection limit', () => {
/*
{
diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js
index c44ad29..c4b9f27 100644
--- a/cypress/integration/select-one.spec.js
+++ b/cypress/integration/select-one.spec.js
@@ -269,6 +269,49 @@ describe('Choices - select one', () => {
});
});
+ describe('disabled via attribute', () => {
+ beforeEach(() => {
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices')
+ .click();
+ });
+
+ it('disables the search input', () => {
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices__input--cloned')
+ .should('be.disabled');
+ });
+
+ describe('on click', () => {
+ it('opens choice dropdown', () => {
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices__list--dropdown')
+ .should('be.visible');
+ });
+ });
+
+ describe('attempting to select choice', () => {
+ let selectedChoice;
+
+ it('does not select choice', () => {
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices__list--dropdown .choices__item')
+ .last()
+ .then($lastChoice => {
+ selectedChoice = $lastChoice;
+ })
+ .click();
+
+ cy.get('[data-test-hook=disabled-via-attr]')
+ .find('.choices__list--single .choices__item')
+ .last()
+ .should($item => {
+ expect($item.text()).to.not.contain(selectedChoice.text());
+ });
+ });
+ });
+ });
+
describe('prepend/append', () => {
/*
{
diff --git a/cypress/integration/text.spec.js b/cypress/integration/text.spec.js
index 4cb5279..b774943 100644
--- a/cypress/integration/text.spec.js
+++ b/cypress/integration/text.spec.js
@@ -284,9 +284,17 @@ describe('Choices - text element', () => {
});
});
- describe('disabled', () => {
+ describe('adding items disabled', () => {
it('does not allow me to input data', () => {
- cy.get('[data-test-hook=disabled]')
+ cy.get('[data-test-hook=adding-items-disabled]')
+ .find('.choices__input--cloned')
+ .should('be.disabled');
+ });
+ });
+
+ describe('disabled via attribute', () => {
+ it('does not allow me to input data', () => {
+ cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__input--cloned')
.should('be.disabled');
});
diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html
index 2fd76fd..32a362c 100644
--- a/public/test/select-multiple.html
+++ b/public/test/select-multiple.html
@@ -68,6 +68,15 @@
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
@@ -104,10 +109,11 @@
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
});
- new Choices('#choices-disabled', {
+ new Choices('#choices-adding-items-disabled', {
addItems: false,
- removeItems: false,
- }).disable();
+ });
+
+ new Choices('#choices-disabled-via-attr');
new Choices('#choices-prepend-append', {
prependValue: 'before-',
diff --git a/src/scripts/choices.js b/src/scripts/choices.js
index 7885a75..e2d16ae 100644
--- a/src/scripts/choices.js
+++ b/src/scripts/choices.js
@@ -1830,7 +1830,10 @@ class Choices {
this.input.setWidth(true);
}
- if (!this.config.addItems) {
+ if (
+ !this.config.addItems ||
+ this.passedElement.element.hasAttribute('disabled')
+ ) {
this.disable();
}
diff --git a/src/scripts/components/wrapped-element.test.js b/src/scripts/components/wrapped-element.test.js
index 2b1c154..bf2b99f 100644
--- a/src/scripts/components/wrapped-element.test.js
+++ b/src/scripts/components/wrapped-element.test.js
@@ -10,7 +10,7 @@ describe('components/wrappedElement', () => {
element = document.createElement('select');
instance = new WrappedElement({
element,
- classNames: DEFAULT_CLASSNAMES
+ classNames: DEFAULT_CLASSNAMES,
});
});
@@ -51,15 +51,15 @@ describe('components/wrappedElement', () => {
instance.conceal();
expect(instance.element.tabIndex).to.equal(-1);
expect(
- instance.element.classList.contains(instance.classNames.input)
+ instance.element.classList.contains(instance.classNames.input),
).to.equal(true);
expect(
- instance.element.classList.contains(instance.classNames.hiddenState)
+ instance.element.classList.contains(instance.classNames.hiddenState),
).to.equal(true);
expect(instance.element.getAttribute('aria-hidden')).to.equal('true');
expect(instance.element.getAttribute('data-choice')).to.equal('active');
expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(
- originalStyling
+ originalStyling,
);
});
});
@@ -76,16 +76,16 @@ describe('components/wrappedElement', () => {
instance.reveal();
expect(instance.element.tabIndex).to.equal(0);
expect(
- instance.element.classList.contains(instance.classNames.input)
+ instance.element.classList.contains(instance.classNames.input),
).to.equal(false);
expect(
- instance.element.classList.contains(instance.classNames.hiddenState)
+ instance.element.classList.contains(instance.classNames.hiddenState),
).to.equal(false);
expect(instance.element.getAttribute('style')).to.equal(originalStyling);
expect(instance.element.getAttribute('aria-hidden')).to.equal(null);
expect(instance.element.getAttribute('data-choice')).to.equal(null);
expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(
- null
+ null,
);
});
});
@@ -141,7 +141,7 @@ describe('components/wrappedElement', () => {
describe('triggerEvent', () => {
it('fires event on element using passed eventType and data', done => {
const data = {
- test: true
+ test: true,
};
instance.element.addEventListener('testEvent', ({ detail }) => {