Resolve bug 473 (#739)

* Fix #473

* Add tests

* Tweak cypress tests

* Build

cypress/integration/select-one.spec.js

@@ -962,5 +962,41 @@ describe('Choices - select one', () => {
           });
       });
     });
+
+    describe('disabling first choice via options', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=disabled-first-choice-via-options]')
+          .find('.choices')
+          .click();
+      });
+
+      let disabledValue;
+
+      it('disables the first choice', () => {
+        cy.get('[data-test-hook=disabled-first-choice-via-options]')
+          .find('.choices__list--dropdown .choices__list')
+          .children()
+          .first()
+          .should('have.class', 'choices__item--disabled')
+          .then($choice => {
+            disabledValue = $choice.val();
+          });
+      });
+
+      it('selects the first enabled choice', () => {
+        cy.get('[data-test-hook=disabled-first-choice-via-options]')
+          .find('.choices__input[hidden]')
+          .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 => {
+            expect($choice.text().trim()).to.not.equal(disabledValue);
+          });
+      });
+    });
   });
 });

public/assets/scripts/choices.js

@@ -1511,9 +1511,10 @@ var cloneObject = function cloneObject(obj) {
   return JSON.parse(JSON.stringify(obj));
 };
 /**
+ * Returns an array of keys present on the first but missing on the second object
  * @param {object} a
  * @param {object} b
- * @returns {array}
+ * @returns {string[]}
  */
 
 var diff = function diff(a, b) {
@@ -2381,7 +2382,7 @@ function () {
     this.element.innerHTML = '';
   }
   /**
-   * @param {Element} node
+   * @param {Element | DocumentFragment} node
    */
   ;
 
@@ -3045,12 +3046,13 @@ var TEMPLATES =
 /* harmony default export */ var templates = (TEMPLATES);
 // CONCATENATED MODULE: ./src/scripts/actions/choices.js
 /**
+ * @typedef {import('redux').Action} Action
  * @typedef {import('../../../types/index').Choices.Choice} Choice
  */
 
 /**
  * @argument {Choice} choice
- * @returns {{ type: string } & Choice}
+ * @returns {Action & Choice}
  */
 
 var choices_addChoice = function addChoice(_ref) {
@@ -3078,7 +3080,7 @@ var choices_addChoice = function addChoice(_ref) {
 };
 /**
  * @argument {Choice[]} results
- * @returns {{ type: string, results: Choice[] }}
+ * @returns {Action & { results: Choice[] }}
  */
 
 var choices_filterChoices = function filterChoices(results) {
@@ -3089,7 +3091,7 @@ var choices_filterChoices = function filterChoices(results) {
 };
 /**
  * @argument {boolean} active
- * @returns {{ type: string, active: boolean }}
+ * @returns {Action & { active: boolean }}
  */
 
 var choices_activateChoices = function activateChoices(active) {
@@ -3103,7 +3105,7 @@ var choices_activateChoices = function activateChoices(active) {
   };
 };
 /**
- * @returns {{ type: string }}
+ * @returns {Action}
  */
 
 var choices_clearChoices = function clearChoices() {
@@ -3114,12 +3116,13 @@ var choices_clearChoices = function clearChoices() {
 // CONCATENATED MODULE: ./src/scripts/actions/items.js
 
 /**
+ * @typedef {import('redux').Action} Action
  * @typedef {import('../../../types/index').Choices.Item} Item
  */
 
 /**
  * @param {Item} item
- * @returns {{ type: string } & Item}
+ * @returns {Action & Item}
  */
 
 var items_addItem = function addItem(_ref) {
@@ -3146,7 +3149,7 @@ var items_addItem = function addItem(_ref) {
 /**
  * @param {string} id
  * @param {string} choiceId
- * @returns {{ type: string, id: string, choiceId: string }}
+ * @returns {Action & { id: string, choiceId: string }}
  */
 
 var items_removeItem = function removeItem(id, choiceId) {
@@ -3159,7 +3162,7 @@ var items_removeItem = function removeItem(id, choiceId) {
 /**
  * @param {string} id
  * @param {boolean} highlighted
- * @returns {{ type: string, id: string, highlighted: boolean }}
+ * @returns {Action & { id: string, highlighted: boolean }}
  */
 
 var items_highlightItem = function highlightItem(id, highlighted) {
@@ -3172,12 +3175,13 @@ var items_highlightItem = function highlightItem(id, highlighted) {
 // CONCATENATED MODULE: ./src/scripts/actions/groups.js
 
 /**
+ * @typedef {import('redux').Action} Action
  * @typedef {import('../../../types/index').Choices.Group} Group
  */
 
 /**
  * @param {Group} group
- * @returns {{ type: string } & Group}
+ * @returns {Action & Group}
  */
 
 var groups_addGroup = function addGroup(_ref) {
@@ -3195,7 +3199,11 @@ var groups_addGroup = function addGroup(_ref) {
 };
 // CONCATENATED MODULE: ./src/scripts/actions/misc.js
 /**
- * @returns {{ type: string }}
+ * @typedef {import('redux').Action} Action
+ */
+
+/**
+ * @returns {Action}
  */
 var clearAll = function clearAll() {
   return {
@@ -3204,7 +3212,7 @@ var clearAll = function clearAll() {
 };
 /**
  * @param {any} state
- * @returns {{ type: string, state: object }}
+ * @returns {Action & { state: object }}
  */
 
 var resetTo = function resetTo(state) {
@@ -3215,7 +3223,7 @@ var resetTo = function resetTo(state) {
 };
 /**
  * @param {boolean} isLoading
- * @returns {{ type: string, isLoading: boolean }}
+ * @returns {Action & { isLoading: boolean }}
  */
 
 var setIsLoading = function setIsLoading(isLoading) {
@@ -3297,23 +3305,13 @@ function () {
       arrayMerge: function arrayMerge(_, sourceArray) {
         return [].concat(sourceArray);
       }
-    }); // Convert addItemFilter to function
-
-    if (userConfig.addItemFilter && typeof userConfig.addItemFilter !== 'function') {
-      var re = userConfig.addItemFilter instanceof RegExp ? userConfig.addItemFilter : new RegExp(userConfig.addItemFilter);
-      this.config.addItemFilter = re.test.bind(re);
-    }
-
+    });
     var invalidConfigOptions = diff(this.config, DEFAULT_CONFIG);
 
     if (invalidConfigOptions.length) {
       console.warn('Unknown config option(s) passed', invalidConfigOptions.join(', '));
     }
 
-    if (!['auto', 'always'].includes(this.config.renderSelectedChoices)) {
-      this.config.renderSelectedChoices = 'auto';
-    }
-
     var passedElement = typeof element === 'string' ? document.querySelector(element) : element;
 
     if (!(passedElement instanceof HTMLInputElement || passedElement instanceof HTMLSelectElement)) {
@@ -3324,6 +3322,16 @@ function () {
     this._isSelectOneElement = passedElement.type === SELECT_ONE_TYPE;
     this._isSelectMultipleElement = passedElement.type === SELECT_MULTIPLE_TYPE;
     this._isSelectElement = this._isSelectOneElement || this._isSelectMultipleElement;
+    this.config.searchEnabled = this._isSelectMultipleElement || this.config.searchEnabled;
+
+    if (!['auto', 'always'].includes(this.config.renderSelectedChoices)) {
+      this.config.renderSelectedChoices = 'auto';
+    }
+
+    if (userConfig.addItemFilter && typeof userConfig.addItemFilter !== 'function') {
+      var re = userConfig.addItemFilter instanceof RegExp ? userConfig.addItemFilter : new RegExp(userConfig.addItemFilter);
+      this.config.addItemFilter = re.test.bind(re);
+    }
 
     if (this._isTextElement) {
       this.passedElement = new WrappedInput({
@@ -5339,6 +5347,9 @@ function () {
 
     var hasSelectedChoice = choices.some(function (choice) {
       return choice.selected;
+    });
+    var firstEnabledChoiceIndex = choices.findIndex(function (_choice) {
+      return _choice.disabled === undefined || !_choice.disabled;
     }); // Add each choice
 
     choices.forEach(function (choice, index) {
@@ -5355,12 +5366,15 @@ function () {
             id: choice.id || null
           });
         } else {
-          // If there is a selected choice already or the choice is not
-          // the first in the array, add each choice normally
-          // Otherwise pre-select the first choice in the array if it's a single select
-          var shouldPreselect = _this22._isSelectOneElement && !hasSelectedChoice && index === 0;
+          /**
+           * If there is a selected choice already or the choice is not the first in
+           * the array, add each choice normally.
+           *
+           * Otherwise we pre-select the first enabled choice in the array ("select-one" only)
+           */
+          var shouldPreselect = _this22._isSelectOneElement && !hasSelectedChoice && index === firstEnabledChoiceIndex;
           var isSelected = shouldPreselect ? true : choice.selected;
-          var isDisabled = shouldPreselect ? false : choice.disabled;
+          var isDisabled = choice.disabled;
 
           _this22._addChoice({
             value: value,

public/test/select-one/index.html

@@ -102,6 +102,18 @@
           </select>
         </div>
 
+        <div data-test-hook="disabled-first-choice-via-options">
+          <label for="choices-disabled-choice-via-options"
+            >Disabled first choice by options</label
+          >
+          <select
+            class="form-control"
+            name="choices-disabled-choice-via-options"
+            id="choices-disabled-choice-via-options"
+          >
+          </select>
+        </div>
+
         <div data-test-hook="add-items-disabled">
           <label for="choices-add-items-disabled">Add items disabled</label>
           <select
@@ -373,6 +385,29 @@
           removeItemButton: true,
         });
 
+        new Choices('#choices-disabled-choice-via-options', {
+          removeItemButton: true,
+          choices: [
+            {
+              value: 'Choice 1',
+              label: 'Choice 1',
+              disabled: true,
+            },
+            {
+              value: 'Choice 2',
+              label: 'Choice 2',
+            },
+            {
+              value: 'Choice 3',
+              label: 'Choice 3',
+            },
+            {
+              value: 'Choice 4',
+              label: 'Choice 4',
+            },
+          ],
+        });
+
         new Choices('#choices-add-items-disabled', {
           addItems: false,
         });

src/scripts/choices.js

@@ -2115,6 +2115,9 @@ class Choices {
 
     // Determine whether there is a selected choice
     const hasSelectedChoice = choices.some(choice => choice.selected);
+    const firstEnabledChoiceIndex = choices.findIndex(
+      _choice => _choice.disabled === undefined || !_choice.disabled,
+    );
 
     // Add each choice
     choices.forEach((choice, index) => {
@@ -2128,13 +2131,19 @@ class Choices {
             id: choice.id || null,
           });
         } else {
-          // If there is a selected choice already or the choice is not
-          // the first in the array, add each choice normally
-          // Otherwise pre-select the first choice in the array if it's a single select
+          /**
+           * If there is a selected choice already or the choice is not the first in
+           * the array, add each choice normally.
+           *
+           * Otherwise we pre-select the first enabled choice in the array ("select-one" only)
+           */
           const shouldPreselect =
-            this._isSelectOneElement && !hasSelectedChoice && index === 0;
+            this._isSelectOneElement &&
+            !hasSelectedChoice &&
+            index === firstEnabledChoiceIndex;
+
           const isSelected = shouldPreselect ? true : choice.selected;
-          const isDisabled = shouldPreselect ? false : choice.disabled;
+          const isDisabled = choice.disabled;
 
           this._addChoice({
             value,