Merge branch 'master' into scope-mouse-down

.github/workflows/browsers.yml

@@ -28,6 +28,8 @@ jobs:
             browser: ie
           - os: macOS-latest
             browser: chrome
+          # Safari workaround is not working in Catalina
+          - browser: safari
 
     runs-on: ${{ matrix.os }}
     steps:
@@ -42,6 +44,17 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: '12.x'
+
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.OS }}-build-${{ matrix.browser }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+
       - run: |
           npm ci
           npm run build
@@ -94,9 +107,13 @@ jobs:
       - uses: actions/checkout@v1
         with:
           fetch-depth: 1
-      - uses: actions/setup-node@v1
+      - name: Cache node modules
+        uses: actions/cache@v1
         with:
-          node-version: '12.x'
+          path: ~/.npm
+          key: ${{ runner.OS }}-build-puppeteer
+          restore-keys: |
+            ${{ runner.OS }}-build-puppeteer
       - run: |
           npm ci
           npm run build

.github/workflows/e2e-tests.yml

@@ -10,11 +10,15 @@ on:
       - 'webpack.config.*'
       - 'public/test/**'
       - 'cypress/**'
-      - '.github/workflows/cypress.yml'
+      - '.github/workflows/e2e-tests.yml'
 
 jobs:
   test-e2e:
     runs-on: ubuntu-latest
+    env:
+      CI: true
+      TERM: xterm-256color
+
     steps:
       - uses: actions/checkout@v1
         with:
@@ -22,33 +26,42 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12.x
+
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+
+      - name: Get Cypress info
+        id: cypress-info
+        run: |
+          echo ::set-output name=version::$(jq -r .devDependencies.cypress ./package.json)
+          echo ::set-output name=cache::$(npx cypress cache path)
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+      - name: Cache Cypress cache
+        uses: actions/cache@v1
+        with:
+          path: ${{ steps.cypress-info.outputs.cache }}
+          key: ${{ runner.OS }}-cypress-${{ steps.cypress-info.outputs.version }}
+          restore-keys: |
+            ${{ runner.OS }}-cypress-${{ steps.cypress-info.outputs.version }}
 
       - name: Install dependencies
         run: npm ci
         env:
           HUSKY_SKIP_INSTALL: true
 
-      - name: run Cypress (with recording)
-        run: npx run-p --race start cypress:ci
+      - name: run Cypress (with or without recording)
+        # if we have ran out of free Cypress recordings, run Cypress with recording switched off
+        run: npx run-p --race start cypress:ci || npx run-p --race start cypress:run
         env:
-          CI: true
-          TERM: xterm-256color
-          NODE_ENV: production # prevent watching
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          DEBUG: commit-info,cypress:server:record
-          # https://docs.cypress.io/guides/guides/continuous-integration.html#Environment-variables
-          COMMIT_INFO_BRANCH: ${{ github.head_ref }}
-          COMMIT_INFO_AUTHOR: ${{ github.event.sender.login }}
-          COMMIT_INFO_SHA: ${{ github.event.after }}
-
-      # if we have ran out of free Cypress recordings, run Cypress with recording switched off
-      - name: run Cypress (without recording)
-        if: failure()
-        run: npx run-p --race start cypress:run
-        env:
-          CI: true
-          TERM: xterm-256color
           NODE_ENV: production # prevent watching
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           DEBUG: commit-info,cypress:server:record

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

package-lock.json

@@ -2956,9 +2956,9 @@
       "dev": true
     },
     "cypress": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-3.5.0.tgz",
-      "integrity": "sha512-I1iSReD2C8CTP6s4BvQky4gEqHBnKLmhBIqFyCUZdj6BQ6ZDxGnmIbQPM5g79E2iP60KTIbTK99ZPSDVtsNUUg==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-3.6.0.tgz",
+      "integrity": "sha512-ODhbOrH1XZx0DUoYmJSvOSbEQjycNOpFYe7jOnHkT1+sdsn2+uqwAjZ1x982q3H4R/5iZjpSd50gd/iw2bofzg==",
       "dev": true,
       "requires": {
         "@cypress/listr-verbose-renderer": "0.4.1",

package.json

@@ -9,8 +9,8 @@
     "build": "run-p js:build css:build",
     "lint": "eslint src/scripts",
     "bundlesize": "bundlesize",
-    "cypress:run": "$(npm bin)/cypress run",
-    "cypress:open": "$(npm bin)/cypress open",
+    "cypress:run": "cypress run",
+    "cypress:open": "cypress open",
     "cypress:ci": "cypress run --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
     "test": "run-s test:unit test:e2e",
     "test:unit": "NODE_ENV=test mocha",
@@ -62,7 +62,7 @@
     "bundlesize": "^0.18.0",
     "chai": "^4.2.0",
     "csso-cli": "^3.0.0",
-    "cypress": "3.5.0",
+    "cypress": "3.6.0",
     "eslint": "^6.6.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^6.5.0",

public/assets/images/browserconfig.xml

@@ -1,9 +1,9 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-  <msapplication>
-    <tile>
-      <square150x150logo src="/assets/images/mstile-150x150.png"/>
-      <TileColor>#ffffff</TileColor>
-    </tile>
-  </msapplication>
-</browserconfig>
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/assets/images/mstile-150x150.png"/>
+      <TileColor>#ffffff</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

public/assets/scripts/choices.js

@@ -1372,8 +1372,8 @@ var getAdjacentEl = function getAdjacentEl(startEl, selector, direction) {
   return sibling;
 };
 /**
- * @param {HTMLElement} element
- * @param {HTMLElement} parent
+ * @param {Element} element
+ * @param {Element} parent
  * @param {-1 | 1} direction
  * @returns {boolean}
  */
@@ -1412,7 +1412,7 @@ var sanitise = function sanitise(value) {
   return value.replace(/&/g, '&amp;').replace(/>/g, '&rt;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
 };
 /**
- * @returns {function}
+ * @returns {() => (str: string) => Element}
  */
 
 var strToEl = function () {
@@ -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) {
@@ -1621,14 +1622,14 @@ function () {
   }
   /**
    * Get group by group id
-   * @param  {string} id Group ID
+   * @param  {number} id Group ID
    * @returns {Group | undefined} Group data
    */
   ;
 
   _proto.getGroupById = function getGroupById(id) {
     return this.groups.find(function (group) {
-      return group.id === parseInt(id, 10);
+      return group.id === id;
     });
   };
 
@@ -2381,7 +2382,7 @@ function () {
     this.element.innerHTML = '';
   }
   /**
-   * @param {Element} node
+   * @param {Element | DocumentFragment} node
    */
   ;
 
@@ -2410,7 +2411,7 @@ function () {
     this.element.scrollTop = 0;
   }
   /**
-   * @param {HTMLElement} element
+   * @param {Element} element
    * @param {1 | -1} direction
    */
   ;
@@ -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({
@@ -3878,13 +3886,13 @@ function () {
 
     this.containerOuter.removeLoadingState();
 
-    this._setLoading(true);
+    this._startLoading();
 
     choicesArrayOrFetcher.forEach(function (groupOrChoice) {
       if (groupOrChoice.choices) {
         _this11._addGroup({
+          id: parseInt(groupOrChoice.id, 10) || null,
           group: groupOrChoice,
-          id: groupOrChoice.id || null,
           valueKey: value,
           labelKey: label
         });
@@ -3900,7 +3908,7 @@ function () {
       }
     });
 
-    this._setLoading(false);
+    this._stopLoading();
 
     return this;
   };
@@ -4331,8 +4339,12 @@ function () {
     }
   };
 
-  _proto._setLoading = function _setLoading(isLoading) {
-    this._store.dispatch(setIsLoading(isLoading));
+  _proto._startLoading = function _startLoading() {
+    this._store.dispatch(setIsLoading(true));
+  };
+
+  _proto._stopLoading = function _stopLoading() {
+    this._store.dispatch(setIsLoading(false));
   };
 
   _proto._handleLoadingState = function _handleLoadingState(setLoading) {
@@ -4505,39 +4517,21 @@ function () {
     documentElement.removeEventListener('keydown', this._onKeyDown, true);
     documentElement.removeEventListener('touchend', this._onTouchEnd, true);
     documentElement.removeEventListener('mousedown', this._onMouseDown, true);
-    documentElement.removeEventListener('keyup', this._onKeyUp, {
-      passive: true
-    });
-    documentElement.removeEventListener('click', this._onClick, {
-      passive: true
-    });
-    documentElement.removeEventListener('touchmove', this._onTouchMove, {
-      passive: true
-    });
-    documentElement.removeEventListener('mouseover', this._onMouseOver, {
-      passive: true
-    });
+    documentElement.removeEventListener('keyup', this._onKeyUp);
+    documentElement.removeEventListener('click', this._onClick);
+    documentElement.removeEventListener('touchmove', this._onTouchMove);
+    documentElement.removeEventListener('mouseover', this._onMouseOver);
 
     if (this._isSelectOneElement) {
-      this.containerOuter.element.removeEventListener('focus', this._onFocus, {
-        passive: true
-      });
-      this.containerOuter.element.removeEventListener('blur', this._onBlur, {
-        passive: true
-      });
+      this.containerOuter.element.removeEventListener('focus', this._onFocus);
+      this.containerOuter.element.removeEventListener('blur', this._onBlur);
     }
 
-    this.input.element.removeEventListener('focus', this._onFocus, {
-      passive: true
-    });
-    this.input.element.removeEventListener('blur', this._onBlur, {
-      passive: true
-    });
+    this.input.element.removeEventListener('focus', this._onFocus);
+    this.input.element.removeEventListener('blur', this._onBlur);
 
     if (this.input.element.form) {
-      this.input.element.form.removeEventListener('reset', this._onFormReset, {
-        passive: true
-      });
+      this.input.element.form.removeEventListener('reset', this._onFormReset);
     }
 
     this.input.removeEventListeners();
@@ -5027,7 +5021,7 @@ function () {
     var passedCustomProperties = customProperties;
     var items = this._store.items;
     var passedLabel = label || passedValue;
-    var passedOptionId = parseInt(choiceId, 10) || -1;
+    var passedOptionId = choiceId || -1;
     var group = groupId >= 0 ? this._store.getGroupById(groupId) : null;
     var id = items ? items.length + 1 : 1; // If a prepended value has been passed, prepend it
 
@@ -5127,12 +5121,12 @@ function () {
     var choiceElementId = this._baseId + "-" + this._idNames.itemChoice + "-" + choiceId;
 
     this._store.dispatch(choices_addChoice({
-      value: value,
-      label: choiceLabel,
       id: choiceId,
       groupId: groupId,
-      disabled: isDisabled,
       elementId: choiceElementId,
+      value: value,
+      label: choiceLabel,
+      disabled: isDisabled,
       customProperties: customProperties,
       placeholder: placeholder,
       keyCode: keyCode
@@ -5288,7 +5282,7 @@ function () {
       this._highlightPosition = 0;
       this._isSearching = false;
 
-      this._setLoading(true);
+      this._startLoading();
 
       if (this._presetGroups.length) {
         this._addPredefinedGroups(this._presetGroups);
@@ -5296,7 +5290,7 @@ function () {
         this._addPredefinedChoices(this._presetChoices);
       }
 
-      this._setLoading(false);
+      this._stopLoading();
     }
 
     if (this._isTextElement) {
@@ -5334,13 +5328,14 @@ function () {
     // If sorting is enabled or the user is searching, filter choices
     if (this.config.shouldSort) {
       choices.sort(this.config.sorter);
-    } // Determine whether there is a selected choice
-
+    }
 
     var hasSelectedChoice = choices.some(function (choice) {
       return choice.selected;
-    }); // Add each choice
-
+    });
+    var firstEnabledChoiceIndex = choices.findIndex(function (choice) {
+      return choice.disabled === undefined || !choice.disabled;
+    });
     choices.forEach(function (choice, index) {
       var value = choice.value,
           label = choice.label,
@@ -5355,12 +5350,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

@@ -614,13 +614,13 @@ class Choices {
 
     this.containerOuter.removeLoadingState();
 
-    this._setLoading(true);
+    this._startLoading();
 
     choicesArrayOrFetcher.forEach(groupOrChoice => {
       if (groupOrChoice.choices) {
         this._addGroup({
+          id: parseInt(groupOrChoice.id, 10) || null,
           group: groupOrChoice,
-          id: groupOrChoice.id || null,
           valueKey: value,
           labelKey: label,
         });
@@ -636,7 +636,7 @@ class Choices {
       }
     });
 
-    this._setLoading(false);
+    this._stopLoading();
 
     return this;
   }
@@ -1076,8 +1076,12 @@ class Choices {
     }
   }
 
-  _setLoading(isLoading) {
-    this._store.dispatch(setIsLoading(isLoading));
+  _startLoading() {
+    this._store.dispatch(setIsLoading(true));
+  }
+
+  _stopLoading() {
+    this._store.dispatch(setIsLoading(false));
   }
 
   _handleLoadingState(setLoading = true) {
@@ -1810,7 +1814,7 @@ class Choices {
     const passedCustomProperties = customProperties;
     const { items } = this._store;
     const passedLabel = label || passedValue;
-    const passedOptionId = parseInt(choiceId, 10) || -1;
+    const passedOptionId = choiceId || -1;
     const group = groupId >= 0 ? this._store.getGroupById(groupId) : null;
     const id = items ? items.length + 1 : 1;
 
@@ -1904,12 +1908,12 @@ class Choices {
 
     this._store.dispatch(
       addChoice({
-        value,
-        label: choiceLabel,
         id: choiceId,
         groupId,
-        disabled: isDisabled,
         elementId: choiceElementId,
+        value,
+        label: choiceLabel,
+        disabled: isDisabled,
         customProperties,
         placeholder,
         keyCode,
@@ -2076,7 +2080,7 @@ class Choices {
     if (this._isSelectElement) {
       this._highlightPosition = 0;
       this._isSearching = false;
-      this._setLoading(true);
+      this._startLoading();
 
       if (this._presetGroups.length) {
         this._addPredefinedGroups(this._presetGroups);
@@ -2084,7 +2088,7 @@ class Choices {
         this._addPredefinedChoices(this._presetChoices);
       }
 
-      this._setLoading(false);
+      this._stopLoading();
     }
 
     if (this._isTextElement) {
@@ -2122,10 +2126,11 @@ class Choices {
       choices.sort(this.config.sorter);
     }
 
-    // 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) => {
       const { value, label, customProperties, placeholder } = choice;
 
@@ -2137,13 +2142,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,

src/scripts/choices.test.js

@@ -1539,12 +1539,12 @@ describe('choices', () => {
       const label = 'label';
       const choices = [
         {
-          id: '1',
+          id: 1,
           value: '1',
           label: 'Test 1',
         },
         {
-          id: '2',
+          id: 2,
           value: '2',
           label: 'Test 2',
         },

src/scripts/components/list.js

@@ -44,7 +44,7 @@ export default class List {
   }
 
   /**
-   * @param {HTMLElement} element
+   * @param {Element} element
    * @param {1 | -1} direction
    */
   scrollToChildElement(element, direction) {

src/scripts/lib/utils.js

@@ -83,8 +83,8 @@ export const getAdjacentEl = (startEl, selector, direction = 1) => {
 };
 
 /**
- * @param {HTMLElement} element
- * @param {HTMLElement} parent
+ * @param {Element} element
+ * @param {Element} parent
  * @param {-1 | 1} direction
  * @returns {boolean}
  */
@@ -125,7 +125,7 @@ export const sanitise = value => {
 };
 
 /**
- * @returns {function}
+ * @returns {() => (str: string) => Element}
  */
 export const strToEl = (() => {
   const tmpEl = document.createElement('div');

src/scripts/store/store.js

@@ -152,10 +152,10 @@ export default class Store {
 
   /**
    * Get group by group id
-   * @param  {string} id Group ID
+   * @param  {number} id Group ID
    * @returns {Group | undefined} Group data
    */
   getGroupById(id) {
-    return this.groups.find(group => group.id === parseInt(id, 10));
+    return this.groups.find(group => group.id === id);
   }
 }

src/scripts/store/store.test.js

@@ -245,10 +245,8 @@ describe('reducers/store', () => {
 
     describe('getGroupById', () => {
       it('returns group by id', () => {
-        const id = '1';
-        const expectedResponse = state.groups.find(
-          group => group.id === parseInt(id, 10),
-        );
+        const id = 1;
+        const expectedResponse = state.groups.find(group => group.id === id);
         const actualResponse = instance.getGroupById(id);
         expect(actualResponse).to.eql(expectedResponse);
       });

types/index.d.ts

@@ -23,12 +23,12 @@ declare namespace Choices {
   }
 
   interface Choice {
-    id?: string;
+    id?: number;
     customProperties?: Record<string, any>;
     disabled?: boolean;
     active?: boolean;
     elementId?: string;
-    groupId?: string;
+    groupId?: number;
     keyCode?: number;
     label: string;
     placeholder?: boolean;
@@ -37,14 +37,14 @@ declare namespace Choices {
   }
 
   interface Group {
-    id?: string;
+    id?: number;
     active?: boolean;
     disabled?: boolean;
     value: any;
   }
 
   interface Item extends Choice {
-    choiceId?: string;
+    choiceId?: number;
     keyCode?: number;
     highlighted?: boolean;
   }
@@ -61,7 +61,7 @@ declare namespace Choices {
      * Arguments: id, value, label, groupValue, keyCode
      */
     addItem: CustomEvent<{
-      id: string;
+      id: number;
       value: string;
       label: string;
       groupValue: string;
@@ -76,7 +76,7 @@ declare namespace Choices {
      * Arguments: id, value, label, groupValue
      */
     removeItem: CustomEvent<{
-      id: string;
+      id: number;
       value: string;
       label: string;
       groupValue: string;
@@ -90,7 +90,7 @@ declare namespace Choices {
      * Arguments: id, value, label, groupValue
      */
     highlightItem: CustomEvent<{
-      id: string;
+      id: number;
       value: string;
       label: string;
       groupValue: string;
@@ -104,7 +104,7 @@ declare namespace Choices {
      * Arguments: id, value, label, groupValue
      */
     unhighlightItem: CustomEvent<{
-      id: string;
+      id: number;
       value: string;
       label: string;
       groupValue: string;