Fix Choices was not disable in a <fieldset disabled> Choices-js#1132

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Bug Fixes (from 10.2.0)
 * Fix Choices does not accept an element from an iframe [#1057](https://github.com/Choices-js/Choices/issues/1057)
+* Fix Choices was not disable in a `<fieldset disabled>` [#1132](https://github.com/Choices-js/Choices/issues/1132)
 
 ## [11.0.0-rc5] (2024-08-08)
 

public/assets/scripts/choices.cjs

@@ -3812,8 +3812,12 @@ var Choices = /** @class */ (function () {
         this._store.subscribe(this._render);
         this._render();
         this._addEventListeners();
-        var shouldDisable = !this.config.addItems ||
-            this.passedElement.element.hasAttribute('disabled');
+        var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+            (this._isSelectElement &&
+                !this.config.addChoices &&
+                this._store.choices.length === 0) ||
+            this.passedElement.element.hasAttribute('disabled') ||
+            !!this.passedElement.element.closest('fieldset:disabled');
         if (shouldDisable) {
             this.disable();
         }

public/assets/scripts/choices.js

@@ -3816,8 +3816,12 @@
             this._store.subscribe(this._render);
             this._render();
             this._addEventListeners();
-            var shouldDisable = !this.config.addItems ||
-                this.passedElement.element.hasAttribute('disabled');
+            var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+                (this._isSelectElement &&
+                    !this.config.addChoices &&
+                    this._store.choices.length === 0) ||
+                this.passedElement.element.hasAttribute('disabled') ||
+                !!this.passedElement.element.closest('fieldset:disabled');
             if (shouldDisable) {
                 this.disable();
             }

public/assets/scripts/choices.mjs

@@ -3810,8 +3810,12 @@ var Choices = /** @class */ (function () {
         this._store.subscribe(this._render);
         this._render();
         this._addEventListeners();
-        var shouldDisable = !this.config.addItems ||
-            this.passedElement.element.hasAttribute('disabled');
+        var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+            (this._isSelectElement &&
+                !this.config.addChoices &&
+                this._store.choices.length === 0) ||
+            this.passedElement.element.hasAttribute('disabled') ||
+            !!this.passedElement.element.closest('fieldset:disabled');
         if (shouldDisable) {
             this.disable();
         }

public/assets/scripts/choices.search-basic.cjs

@@ -3330,8 +3330,12 @@ var Choices = /** @class */ (function () {
         this._store.subscribe(this._render);
         this._render();
         this._addEventListeners();
-        var shouldDisable = !this.config.addItems ||
-            this.passedElement.element.hasAttribute('disabled');
+        var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+            (this._isSelectElement &&
+                !this.config.addChoices &&
+                this._store.choices.length === 0) ||
+            this.passedElement.element.hasAttribute('disabled') ||
+            !!this.passedElement.element.closest('fieldset:disabled');
         if (shouldDisable) {
             this.disable();
         }

public/assets/scripts/choices.search-basic.js

@@ -3334,8 +3334,12 @@
             this._store.subscribe(this._render);
             this._render();
             this._addEventListeners();
-            var shouldDisable = !this.config.addItems ||
-                this.passedElement.element.hasAttribute('disabled');
+            var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+                (this._isSelectElement &&
+                    !this.config.addChoices &&
+                    this._store.choices.length === 0) ||
+                this.passedElement.element.hasAttribute('disabled') ||
+                !!this.passedElement.element.closest('fieldset:disabled');
             if (shouldDisable) {
                 this.disable();
             }

public/assets/scripts/choices.search-basic.mjs

@@ -3328,8 +3328,12 @@ var Choices = /** @class */ (function () {
         this._store.subscribe(this._render);
         this._render();
         this._addEventListeners();
-        var shouldDisable = !this.config.addItems ||
-            this.passedElement.element.hasAttribute('disabled');
+        var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+            (this._isSelectElement &&
+                !this.config.addChoices &&
+                this._store.choices.length === 0) ||
+            this.passedElement.element.hasAttribute('disabled') ||
+            !!this.passedElement.element.closest('fieldset:disabled');
         if (shouldDisable) {
             this.disable();
         }

public/assets/scripts/choices.search-prefix.cjs

@@ -2196,8 +2196,12 @@ var Choices = /** @class */ (function () {
         this._store.subscribe(this._render);
         this._render();
         this._addEventListeners();
-        var shouldDisable = !this.config.addItems ||
-            this.passedElement.element.hasAttribute('disabled');
+        var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+            (this._isSelectElement &&
+                !this.config.addChoices &&
+                this._store.choices.length === 0) ||
+            this.passedElement.element.hasAttribute('disabled') ||
+            !!this.passedElement.element.closest('fieldset:disabled');
         if (shouldDisable) {
             this.disable();
         }

public/assets/scripts/choices.search-prefix.js

@@ -2200,8 +2200,12 @@
             this._store.subscribe(this._render);
             this._render();
             this._addEventListeners();
-            var shouldDisable = !this.config.addItems ||
-                this.passedElement.element.hasAttribute('disabled');
+            var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+                (this._isSelectElement &&
+                    !this.config.addChoices &&
+                    this._store.choices.length === 0) ||
+                this.passedElement.element.hasAttribute('disabled') ||
+                !!this.passedElement.element.closest('fieldset:disabled');
             if (shouldDisable) {
                 this.disable();
             }

public/assets/scripts/choices.search-prefix.mjs

@@ -2194,8 +2194,12 @@ var Choices = /** @class */ (function () {
         this._store.subscribe(this._render);
         this._render();
         this._addEventListeners();
-        var shouldDisable = !this.config.addItems ||
-            this.passedElement.element.hasAttribute('disabled');
+        var shouldDisable = (this._isTextElement && !this.config.addItems) ||
+            (this._isSelectElement &&
+                !this.config.addChoices &&
+                this._store.choices.length === 0) ||
+            this.passedElement.element.hasAttribute('disabled') ||
+            !!this.passedElement.element.closest('fieldset:disabled');
         if (shouldDisable) {
             this.disable();
         }

public/test/select-multiple/index.html

@@ -117,6 +117,22 @@ <h2>Select multiple inputs</h2>
           </select>
         </div>
 
+        <div data-test-hook="disabled-via-fieldset">
+          <fieldset disabled>
+          <label for="choices-disabled-via-fieldset">Disabled via fieldset</label>
+          <select
+            class="form-control"
+            name="choices-disabled-via-fieldset"
+            id="choices-disabled-via-fieldset"
+            multiple
+          >
+            <option value="Choice 1" selected>Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+          </fieldset>
+        </div>
+
         <div data-test-hook="disabled-via-attr">
           <label for="choices-disabled-via-attr">Disabled via attribute</label>
           <select
@@ -489,6 +505,10 @@ <h2>Select multiple inputs</h2>
           addItems: false,
         });
 
+        new Choices('#choices-disabled-via-fieldset', {
+          allowHTML: true,
+        });
+
         new Choices('#choices-disabled-via-attr', {
           allowHTML: true,
         });

public/test/select-one/index.html

@@ -121,6 +121,21 @@ <h2>Select one inputs</h2>
           </select>
         </div>
 
+        <div data-test-hook="disabled-via-fieldset">
+          <fieldset disabled>
+          <label for="choices-disabled-via-attr">Disabled via fieldset</label>
+          <select
+            class="form-control"
+            name="choices-disabled-via-fieldset"
+            id="choices-disabled-via-fieldset"
+          >
+            <option value="Choice 1" selected>Choice 1</option>
+            <option value="Choice 2">Choice 2</option>
+            <option value="Choice 3">Choice 3</option>
+          </select>
+          </fieldset>
+        </div>
+
         <div data-test-hook="disabled-via-attr">
           <label for="choices-disabled-via-attr">Disabled via attribute</label>
           <select
@@ -528,6 +543,10 @@ <h2>Select one inputs</h2>
           addItems: false,
         });
 
+        new Choices('#choices-disabled-via-fieldset', {
+          allowHTML: true,
+        });
+
         new Choices('#choices-disabled-via-attr', {
           allowHTML: true,
         });

public/test/text/index.html

@@ -119,6 +119,17 @@ <h2>Text inputs</h2>
           />
         </div>
 
+        <div data-test-hook="disabled-via-fieldset">
+          <label for="choices-disabled-via-fieldset">Disabled via fieldset</label>
+          <fieldset disabled>
+            <input
+              class="form-control"
+              id="choices-disabled-via-fieldset"
+              type="text"
+            />
+          </fieldset>
+        </div>
+
         <div data-test-hook="disabled-via-attr">
           <label for="choices-disabled-via-attr">Disabled via attribute</label>
           <input
@@ -233,6 +244,10 @@ <h2>Text inputs</h2>
           addItems: false,
         });
 
+        new Choices('#choices-disabled-via-fieldset', {
+          allowHTML: true,
+        });
+
         new Choices('#choices-disabled-via-attr', {
           allowHTML: true,
         });

src/scripts/choices.ts

@@ -388,8 +388,12 @@ class Choices implements ChoicesInterface {
     this._addEventListeners();
 
     const shouldDisable =
-      !this.config.addItems ||
-      this.passedElement.element.hasAttribute('disabled');
+      (this._isTextElement && !this.config.addItems) ||
+      (this._isSelectElement &&
+        !this.config.addChoices &&
+        this._store.choices.length === 0) ||
+      this.passedElement.element.hasAttribute('disabled') ||
+      !!this.passedElement.element.closest('fieldset:disabled');
 
     if (shouldDisable) {
       this.disable();