Disable element if disabled attr passed

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', () => {
       /*
         {

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', () => {
       /*
         {

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');
       });

public/test/select-multiple.html

@@ -68,6 +68,15 @@
           </select>
         </div>
 
+        <div data-test-hook="disabled-via-attr">
+          <label for="choices-disabled-via-attr">Disabled via attribute</label>
+          <select class="form-control" name="choices-disabled-via-attr" id="choices-disabled-via-attr" multiple disabled>
+            <option value="Choice 1" selected>Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+        </div>
+
         <div data-test-hook="selection-limit">
           <label for="choices-selection-limit">Input limit</label>
           <select class="form-control" name="choices-selection-limit" id="choices-selection-limit" multiple>
@@ -173,6 +182,8 @@
           addItems: false,
         });
 
+        new Choices('#choices-disabled-via-attr');
+
         new Choices('#choices-selection-limit', {
           maxItemCount: 5,
         });

public/test/select-one.html

@@ -68,6 +68,15 @@
           </select>
         </div>
 
+        <div data-test-hook="disabled-via-attr">
+          <label for="choices-disabled-via-attr">Disabled via attribute</label>
+          <select class="form-control" name="choices-disabled-via-attr" id="choices-disabled-via-attr" disabled>
+            <option value="Choice 1" selected>Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+        </div>
+
         <div data-test-hook="prepend-append">
           <label for="choices-prepend-append">Prepend/append</label>
           <select class="form-control" name="choices-prepend-append" id="choices-prepend-append">
@@ -179,6 +188,8 @@
           addItems: false,
         });
 
+        new Choices('#choices-disabled-via-attr');
+
         new Choices('#choices-prepend-append', {
           prependValue: 'before-',
           appendValue: '-after',

public/test/text.html

@@ -59,9 +59,14 @@
           <input class="form-control" id="choices-regex-filter" type="text">
         </div>
 
-        <div data-test-hook="disabled">
+        <div data-test-hook="adding-items-disabled">
-          <label for="choices-disabled">Disabled</label>
+          <label for="choices-adding-items-disabled">Add items disabled</label>
-          <input class="form-control" id="choices-disabled" type="text">
+          <input class="form-control" id="choices-adding-items-disabled" type="text">
+        </div>
+
+        <div data-test-hook="disabled-via-attr">
+          <label for="choices-disabled-via-attr">Disabled via attribute</label>
+          <input class="form-control" id="choices-disabled-via-attr" type="text" disabled>
         </div>
 
         <div data-test-hook="prepend-append">
@@ -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-',

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();
     }
 

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 }) => {