Merge remote-tracking branch 'upstream/master'

.github/workflows/browsers.yml

@@ -41,7 +41,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: 18.x
 
       - name: Cache node modules
         uses: actions/cache@v2

.github/workflows/build-and-test.yml

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
       - name: Build and run all tests
         run: |
           npm ci

.github/workflows/bundlesize.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies and build
         run: |

.github/workflows/deploy-pages.yml

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - name: Build
         run: |

.github/workflows/deployment.yml

@@ -13,7 +13,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - run: npm ci
         env:

.github/workflows/e2e-tests.yml

@@ -26,7 +26,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 18.x
 
       - name: Cache node modules
         uses: actions/cache@v2
@@ -60,7 +60,7 @@ jobs:
 
       - 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
+        run: npm exec -- run-p --race start cypress:ci || npm exec -- run-p --race start cypress:run
         env:
           NODE_ENV: production # prevent watching
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.github/workflows/lint.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies
         run: npm ci

.github/workflows/polyfills-sync.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Check Polyfills documentation and settings sync
         run: node .github/actions-scripts/polyfills-sync.js

.github/workflows/unit-tests.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 18
 
       - name: Install dependencies
         run: npm install --no-optional --no-audit --ignore-scripts

README.md

@@ -151,6 +151,8 @@ Or include Choices directly:
     noResultsText: 'No results found',
     noChoicesText: 'No choices to choose from',
     itemSelectText: 'Press to select',
+    uniqueItemText: 'Only unique values can be added',
+    customAddItemText: 'Only values matching specific conditions can be added',
     addItemText: (value) => {
       return `Press Enter to add <b>"${value}"</b>`;
     },

cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  projectId: 'n7g5qp',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:3001/test',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

cypress.json

@@ -1,5 +0,0 @@
-{
-  "baseUrl": "http://localhost:3001/test",
-  "video": false,
-  "projectId": "n7g5qp"
-}

cypress/e2e/select-multiple.spec.ts

@@ -34,6 +34,7 @@ describe('Choices - select multiple', () => {
           beforeEach(() => {
             cy.get('[data-test-hook=basic]')
               .find('.choices__input--cloned')
+              .wait(200) // Otherwise these tests are flaky
               .type('{esc}');
           });
 
@@ -746,6 +747,70 @@ describe('Choices - select multiple', () => {
       });
     });
 
+    describe('custom properties via HTML', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=custom-properties-html]')
+          .find('.choices')
+          .click();
+      });
+
+      describe('on input', () => {
+        it('filters choices based on a string custom property', () => {
+          const data = [
+            {
+              searchText: 'fantastic',
+              label: 'Label Three',
+            },
+          ];
+
+          data.forEach(({ searchText, label }) => {
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type(searchText);
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .should(($choice) => {
+                expect($choice.text().trim()).to.equal(label);
+              });
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type('{selectall}{del}');
+          });
+        });
+
+        it('filters choices based on a JSON custom property', () => {
+          const data = [
+            {
+              searchText: 'foo',
+              label: 'Label Four',
+            },
+          ];
+
+          data.forEach(({ searchText, label }) => {
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type(searchText);
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .should(($choice) => {
+                expect($choice.text().trim()).to.equal(label);
+              });
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type('{selectall}{del}');
+          });
+        });
+      });
+    });
+
     describe('non-string values', () => {
       beforeEach(() => {
         cy.get('[data-test-hook=non-string-values]').find('.choices').click();

cypress/e2e/select-one.spec.ts

@@ -841,6 +841,70 @@ describe('Choices - select one', () => {
       });
     });
 
+    describe('custom properties via HTML', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=custom-properties-html]')
+          .find('.choices')
+          .click();
+      });
+
+      describe('on input', () => {
+        it('filters choices based on a string custom property', () => {
+          const data = [
+            {
+              searchText: 'fantastic',
+              label: 'Label Three',
+            },
+          ];
+
+          data.forEach(({ searchText, label }) => {
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type(searchText);
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .should(($choice) => {
+                expect($choice.text().trim()).to.equal(label);
+              });
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type('{selectall}{del}');
+          });
+        });
+
+        it('filters choices based on a JSON custom property', () => {
+          const data = [
+            {
+              searchText: 'foo',
+              label: 'Label Four',
+            },
+          ];
+
+          data.forEach(({ searchText, label }) => {
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type(searchText);
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .should(($choice) => {
+                expect($choice.text().trim()).to.equal(label);
+              });
+
+            cy.get('[data-test-hook=custom-properties-html]')
+              .find('.choices__input--cloned')
+              .type('{selectall}{del}');
+          });
+        });
+      });
+    });
+
     describe('non-string values', () => {
       beforeEach(() => {
         cy.get('[data-test-hook=non-string-values]').find('.choices').click();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.js",
   "types": "./public/types/src/index.d.ts",
@@ -56,61 +56,61 @@
     "js"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.2",
+    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/register": "^7.17.0",
+    "@babel/register": "^7.18.9",
-    "@types/chai": "^4.3.0",
+    "@types/chai": "^4.3.4",
-    "@types/mocha": "^9.1.0",
+    "@types/mocha": "^10.0.1",
-    "@types/sinon": "^10.0.11",
+    "@types/sinon": "^10.0.13",
-    "@types/sinon-chai": "^3.2.8",
+    "@types/sinon-chai": "^3.2.9",
-    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.11.0",
+    "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.13",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^9.1.0",
     "bundlesize": "^0.18.1",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
     "cross-env": "^7.0.3",
-    "csso-cli": "^3.0.0",
+    "csso-cli": "^4.0.1",
-    "cypress": "9.4.1",
+    "cypress": "11.2.0",
-    "eslint": "^8.9.0",
+    "eslint": "^8.28.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-sort-class-members": "^1.14.1",
+    "eslint-plugin-sort-class-members": "^1.15.2",
-    "eslint-webpack-plugin": "^3.1.1",
+    "eslint-webpack-plugin": "^3.2.0",
-    "express": "^4.17.2",
+    "express": "^4.18.2",
-    "husky": "^7.0.4",
+    "husky": "^8.0.2",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.3",
-    "lint-staged": "^12.3.4",
+    "lint-staged": "^13.0.4",
-    "mocha": "^9.2.0",
+    "mocha": "^10.1.0",
-    "nodemon": "^2.0.15",
+    "nodemon": "^2.0.20",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.19",
-    "postcss-cli": "^9.1.0",
+    "postcss-cli": "^10.0.0",
-    "prettier": "^2.5.1",
+    "prettier": "^2.8.0",
-    "sass": "^1.49.7",
+    "sass": "^1.56.1",
-    "sinon": "^13.0.1",
+    "sinon": "^15.0.0",
     "sinon-chai": "^3.7.0",
-    "stylelint": "^14.5.0",
+    "stylelint": "^14.15.0",
-    "stylelint-config-standard": "^25.0.0",
+    "stylelint-config-standard": "^29.0.0",
-    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-config-standard-scss": "^6.1.0",
-    "ts-loader": "^9.2.6",
+    "ts-loader": "^9.4.1",
-    "ts-node": "^10.5.0",
+    "ts-node": "^10.9.1",
-    "typescript": "^4.5.5",
+    "typescript": "^4.9.3",
-    "webpack": "^5.68.0",
+    "webpack": "^5.75.0",
-    "webpack-cli": "^4.9.2",
+    "webpack-cli": "^5.0.0",
-    "webpack-dev-middleware": "^5.3.1",
+    "webpack-dev-middleware": "^6.0.1",
-    "webpack-hot-middleware": "^2.25.1"
+    "webpack-hot-middleware": "^2.25.3"
   },
   "dependencies": {
     "deepmerge": "^4.2.2",
-    "fuse.js": "^6.5.3",
+    "fuse.js": "^6.6.2",
-    "redux": "^4.1.2"
+    "redux": "^4.2.0"
   },
   "npmName": "choices.js",
   "npmFileMap": [

public/assets/scripts/choices.js

@@ -1,4 +1,4 @@
-/*! choices.js v10.1.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -333,7 +333,7 @@ var Choices = /** @class */function () {
           selected: !!option.selected,
           disabled: option.disabled || option.parentNode.disabled,
           placeholder: option.value === '' || option.hasAttribute('placeholder'),
-          customProperties: option.dataset['custom-properties']
+          customProperties: (0, utils_1.parseCustomProperties)(option.dataset.customProperties)
         });
       });
     }
@@ -1264,7 +1264,8 @@ var Choices = /** @class */function () {
     var hasActiveDropdown = this.dropdown.isActive;
     var hasItems = this.itemList.hasChildren();
     var keyString = String.fromCharCode(keyCode);
-    var wasAlphaNumericChar = /[a-zA-Z0-9-_ ]/.test(keyString);
+    // eslint-disable-next-line no-control-regex
+    var wasPrintableChar = /[^\x00-\x1F]/.test(keyString);
     var BACK_KEY = constants_1.KEY_CODES.BACK_KEY,
       DELETE_KEY = constants_1.KEY_CODES.DELETE_KEY,
       ENTER_KEY = constants_1.KEY_CODES.ENTER_KEY,
@@ -1274,7 +1275,7 @@ var Choices = /** @class */function () {
       DOWN_KEY = constants_1.KEY_CODES.DOWN_KEY,
       PAGE_UP_KEY = constants_1.KEY_CODES.PAGE_UP_KEY,
       PAGE_DOWN_KEY = constants_1.KEY_CODES.PAGE_DOWN_KEY;
-    if (!this._isTextElement && !hasActiveDropdown && wasAlphaNumericChar) {
+    if (!this._isTextElement && !hasActiveDropdown && wasPrintableChar) {
       this.showDropdown();
       if (!this.input.isFocussed) {
         /*
@@ -1282,7 +1283,7 @@ var Choices = /** @class */function () {
           the input was not focussed at the time of key press
           therefore does not have the value of the key.
         */
-        this.input.value += keyString.toLowerCase();
+        this.input.value += event.key.toLowerCase();
       }
     }
     switch (keyCode) {
@@ -3160,7 +3161,7 @@ Object.defineProperty(exports, "__esModule", ({
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.getClassNamesSelector = exports.getClassNames = exports.diff = exports.cloneObject = exports.existsInArray = exports.dispatchEvent = exports.sortByScore = exports.sortByAlpha = exports.strToEl = exports.sanitise = exports.isScrolledIntoView = exports.getAdjacentEl = exports.wrap = exports.isType = exports.getType = exports.generateId = exports.generateChars = exports.getRandomNumber = void 0;
+exports.parseCustomProperties = exports.getClassNamesSelector = exports.getClassNames = exports.diff = exports.cloneObject = exports.existsInArray = exports.dispatchEvent = exports.sortByScore = exports.sortByAlpha = exports.strToEl = exports.sanitise = exports.isScrolledIntoView = exports.getAdjacentEl = exports.wrap = exports.isType = exports.getType = exports.generateId = exports.generateChars = exports.getRandomNumber = void 0;
 var getRandomNumber = function (min, max) {
   return Math.floor(Math.random() * (max - min) + min);
 };
@@ -3328,6 +3329,17 @@ var getClassNamesSelector = function (option) {
   return ".".concat(option);
 };
 exports.getClassNamesSelector = getClassNamesSelector;
+var parseCustomProperties = function (customProperties) {
+  if (typeof customProperties !== 'undefined') {
+    try {
+      return JSON.parse(customProperties);
+    } catch (e) {
+      return customProperties;
+    }
+  }
+  return {};
+};
+exports.parseCustomProperties = parseCustomProperties;
 
 /***/ }),
 
@@ -4114,7 +4126,6 @@ var templates = {
       type = '';
     }
     var classes = __spreadArray(__spreadArray([], (0, utils_1.getClassNames)(item), true), (0, utils_1.getClassNames)(itemChoice), true);
-    console.log(classes);
     if (type === 'no-choices') {
       classes.push(noChoices);
     } else if (type === 'no-results') {

public/assets/scripts/choices.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! choices.js v10.1.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */

public/index.html

@@ -52,7 +52,7 @@
 
     <!-- Choices includes -->
     <link rel="stylesheet" href="assets/styles/choices.min.css" />
-    <script src="assets/scripts/choices.min.js"></script>
+    <script src="assets/scripts/choices.js"></script>
     <!-- End Choices includes -->
 
     <!--[if lt IE 9]>
@@ -440,6 +440,11 @@
             data-custom-properties="This option is fantastic"
             >Label Three</option
           >
+          <option
+            value="Dropdown item 4"
+            data-custom-properties="{ 'description': 'foo' }"
+            >Label Four</option
+          >
         </select>
 
         <label

public/test/select-multiple/index.html

@@ -294,6 +294,28 @@
           ></select>
         </div>
 
+        <div data-test-hook="custom-properties-html">
+          <label for="choices-custom-properties-html">Custom properties</label>
+          <select
+            class="form-control"
+            name="choices-custom-properties-html"
+            id="choices-custom-properties-html"
+          >
+            <option value="Dropdown item 1">Label One</option>
+            <option value="Dropdown item 2">Label Two</option>
+            <option
+              value="Dropdown item 3"
+              data-custom-properties="This option is fantastic"
+              >Label Three</option
+            >
+            <option
+              value="Dropdown item 4"
+              data-custom-properties="{ 'description': 'foo' }"
+              >Label Four</option
+            >
+          </select>
+        </div>
+
         <div data-test-hook="non-string-values">
           <label for="choices-non-string-values">Non-string values</label>
           <select
@@ -490,6 +512,11 @@
           ],
         });
 
+        new Choices('#choices-custom-properties-html', {
+          allowHTML: true,
+          searchFields: ['label', 'value', 'customProperties'],
+        });
+
         new Choices('#choices-non-string-values', {
           allowHTML: true,
           choices: [

public/test/select-one/index.html

@@ -305,6 +305,28 @@
           ></select>
         </div>
 
+        <div data-test-hook="custom-properties-html">
+          <label for="choices-custom-properties-html">Custom properties</label>
+          <select
+            class="form-control"
+            name="choices-custom-properties-html"
+            id="choices-custom-properties-html"
+          >
+            <option value="Dropdown item 1">Label One</option>
+            <option value="Dropdown item 2">Label Two</option>
+            <option
+              value="Dropdown item 3"
+              data-custom-properties="This option is fantastic"
+              >Label Three</option
+            >
+            <option
+              value="Dropdown item 4"
+              data-custom-properties="{ 'description': 'foo' }"
+              >Label Four</option
+            >
+          </select>
+        </div>
+
         <div data-test-hook="non-string-values">
           <label for="choices-non-string-values">Non-string values</label>
           <select
@@ -550,6 +572,11 @@
           ],
         });
 
+        new Choices('#choices-custom-properties-html', {
+          allowHTML: true,
+          searchFields: ['label', 'value', 'customProperties'],
+        });
+
         new Choices('#choices-non-string-values', {
           allowHTML: true,
           choices: [

public/types/cypress/e2e/select-multiple.spec.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=select-multiple.spec.d.ts.map

public/types/cypress/e2e/select-multiple.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-multiple.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/e2e/select-multiple.spec.ts"],"names":[],"mappings":""}

public/types/cypress/e2e/select-one.spec.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=select-one.spec.d.ts.map

public/types/cypress/e2e/select-one.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-one.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/e2e/select-one.spec.ts"],"names":[],"mappings":""}

public/types/cypress/e2e/text.spec.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=text.spec.d.ts.map

public/types/cypress/e2e/text.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/e2e/text.spec.ts"],"names":[],"mappings":""}

public/types/cypress/support/e2e.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=e2e.d.ts.map

public/types/cypress/support/e2e.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"e2e.d.ts","sourceRoot":"","sources":["../../../../cypress/support/e2e.js"],"names":[],"mappings":""}

public/types/src/scripts/lib/utils.d.ts

@@ -25,5 +25,6 @@ export declare const cloneObject: (obj: object) => object;
 export declare const diff: (a: Record<string, any>, b: Record<string, any>) => string[];
 export declare const getClassNames: (ClassNames: Array<string> | string) => Array<string>;
 export declare const getClassNamesSelector: (option: string | Array<string> | null) => string;
+export declare const parseCustomProperties: (customProperties: any) => any;
 export {};
 //# sourceMappingURL=utils.d.ts.map

public/types/src/scripts/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/lib/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MACZ,CAAC;AAEhD,eAAO,MAAM,aAAa,WAAY,MAAM,KAAG,MAC6B,CAAC;AAE7E,eAAO,MAAM,UAAU,YACZ,gBAAgB,GAAG,iBAAiB,UACrC,MAAM,KACb,MASF,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,GAAG,KAAG,MACe,CAAC;AAEnD,eAAO,MAAM,MAAM,SAAU,MAAM,OAAO,GAAG,KAAG,OACY,CAAC;AAE7D,eAAO,MAAM,IAAI,YACN,WAAW,YACX,WAAW,KACnB,WAUF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,OAAO,YACN,MAAM,yBAEf,OAYF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YACpB,WAAW,UACZ,WAAW,yBAElB,OAkBF,CAAC;AAEF,eAAO,MAAM,QAAQ,sCAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,QAAe,MAAM,KAAK,OAc1C,CAAC;AAEL,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,eAAO,MAAM,WAAW,qBACI,eAAe,oCACE,eAAe,KACzD,MAKC,CAAC;AAEL,eAAO,MAAM,WAAW,MACnB,KAAK,MAAM,EAAE,OAAO,CAAC,KACrB,KAAK,MAAM,EAAE,OAAO,CAAC,KACvB,MAKF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,WAAW,QACd,SAAS,eACH,MAAM,GAAG,IAAI,KACxB,OAQF,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,EAAE,SACL,MAAM,mBAEZ,OAOC,CAAC;AAEL,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MACT,CAAC;AAElC;;GAEG;AACH,eAAO,MAAM,IAAI,MACZ,OAAO,MAAM,EAAE,GAAG,CAAC,KACnB,OAAO,MAAM,EAAE,GAAG,CAAC,KACrB,MAAM,EAKR,CAAC;AAEF,eAAO,MAAM,aAAa,eACZ,MAAM,MAAM,CAAC,GAAG,MAAM,KACjC,MAAM,MAAM,CAEd,CAAC;AAEF,eAAO,MAAM,qBAAqB,WACxB,MAAM,GAAG,MAAM,MAAM,CAAC,GAAG,IAAI,WAWtC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/lib/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MACZ,CAAC;AAEhD,eAAO,MAAM,aAAa,WAAY,MAAM,KAAG,MAC6B,CAAC;AAE7E,eAAO,MAAM,UAAU,YACZ,gBAAgB,GAAG,iBAAiB,UACrC,MAAM,KACb,MASF,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,GAAG,KAAG,MACe,CAAC;AAEnD,eAAO,MAAM,MAAM,SAAU,MAAM,OAAO,GAAG,KAAG,OACY,CAAC;AAE7D,eAAO,MAAM,IAAI,YACN,WAAW,YACX,WAAW,KACnB,WAUF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,OAAO,YACN,MAAM,yBAEf,OAYF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YACpB,WAAW,UACZ,WAAW,yBAElB,OAkBF,CAAC;AAEF,eAAO,MAAM,QAAQ,sCAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,QAAe,MAAM,KAAK,OAc1C,CAAC;AAEL,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,eAAO,MAAM,WAAW,qBACI,eAAe,oCACE,eAAe,KACzD,MAKC,CAAC;AAEL,eAAO,MAAM,WAAW,MACnB,KAAK,MAAM,EAAE,OAAO,CAAC,KACrB,KAAK,MAAM,EAAE,OAAO,CAAC,KACvB,MAKF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,WAAW,QACd,SAAS,eACH,MAAM,GAAG,IAAI,KACxB,OAQF,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,EAAE,SACL,MAAM,mBAEZ,OAOC,CAAC;AAEL,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MACT,CAAC;AAElC;;GAEG;AACH,eAAO,MAAM,IAAI,MACZ,OAAO,MAAM,EAAE,GAAG,CAAC,KACnB,OAAO,MAAM,EAAE,GAAG,CAAC,KACrB,MAAM,EAKR,CAAC;AAEF,eAAO,MAAM,aAAa,eACZ,MAAM,MAAM,CAAC,GAAG,MAAM,KACjC,MAAM,MAAM,CAEd,CAAC;AAEF,eAAO,MAAM,qBAAqB,WACxB,MAAM,GAAG,MAAM,MAAM,CAAC,GAAG,IAAI,WAWtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6BAAuB,GAUxD,CAAC"}

public/types/src/scripts/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../../src/scripts/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,KAAK,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;uDAEyB,eAAe,OAC9C,WAAW,CAAC,KAAK,CAAC,mBACN,OAAO,sBACJ,OAAO,iBACZ,OAAO,qBACH,iBAAiB,WAC3B,MAAM,GACd,cAAc;wDAiCd,eAAe,GAAG,cAAc;8DAOgB,eAAe,sBAC5C,OAAO,GAC1B,cAAc;4DAW6B,eAAe,SACpD,MAAM,GACZ,cAAc;uGAiBZ,eAAe,sGAUf,IAAI,oBACW,OAAO,GACxB,cAAc;yCAuDW,eAAe,sBACrB,OAAO,GAC1B,cAAc;mFAiBZ,eAAe,2BACO,KAAK,GAC7B,cAAc;wHAwCZ,eAAe,qHAUf,MAAM,cACG,MAAM,GACjB,cAAc;kDAuCyB,eAAe,oBACrC,MAAM,GACvB,gBAAgB;sDAqBhB,eAAe,GAAG,cAAc;mFAc9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAsBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../../src/scripts/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,KAAK,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;uDAEyB,eAAe,OAC9C,WAAW,CAAC,KAAK,CAAC,mBACN,OAAO,sBACJ,OAAO,iBACZ,OAAO,qBACH,iBAAiB,WAC3B,MAAM,GACd,cAAc;wDAiCd,eAAe,GAAG,cAAc;8DAOgB,eAAe,sBAC5C,OAAO,GAC1B,cAAc;4DAW6B,eAAe,SACpD,MAAM,GACZ,cAAc;uGAiBZ,eAAe,sGAUf,IAAI,oBACW,OAAO,GACxB,cAAc;yCAuDW,eAAe,sBACrB,OAAO,GAC1B,cAAc;mFAiBZ,eAAe,2BACO,KAAK,GAC7B,cAAc;wHAwCZ,eAAe,qHAUf,MAAM,cACG,MAAM,GACjB,cAAc;kDAuCyB,eAAe,oBACrC,MAAM,GACvB,gBAAgB;sDAqBhB,eAAe,GAAG,cAAc;mFAc9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAqBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}

src/scripts/choices.ts

@@ -48,6 +48,7 @@ import {
   isType,
   sortByScore,
   strToEl,
+  parseCustomProperties,
 } from './lib/utils';
 import { defaultState } from './reducers';
 import Store from './store/store';
@@ -292,7 +293,9 @@ class Choices implements Choices {
           disabled: option.disabled || option.parentNode.disabled,
           placeholder:
             option.value === '' || option.hasAttribute('placeholder'),
-          customProperties: option.dataset['custom-properties'],
+          customProperties: parseCustomProperties(
+            option.dataset.customProperties,
+          ),
         });
       });
     }
@@ -1440,7 +1443,8 @@ class Choices implements Choices {
     const hasActiveDropdown = this.dropdown.isActive;
     const hasItems = this.itemList.hasChildren();
     const keyString = String.fromCharCode(keyCode);
-    const wasAlphaNumericChar = /[a-zA-Z0-9-_ ]/.test(keyString);
+    // eslint-disable-next-line no-control-regex
+    const wasPrintableChar = /[^\x00-\x1F]/.test(keyString);
 
     const {
       BACK_KEY,
@@ -1454,7 +1458,7 @@ class Choices implements Choices {
       PAGE_DOWN_KEY,
     } = KEY_CODES;
 
-    if (!this._isTextElement && !hasActiveDropdown && wasAlphaNumericChar) {
+    if (!this._isTextElement && !hasActiveDropdown && wasPrintableChar) {
       this.showDropdown();
 
       if (!this.input.isFocussed) {
@@ -1463,7 +1467,7 @@ class Choices implements Choices {
           the input was not focussed at the time of key press
           therefore does not have the value of the key.
         */
-        this.input.value += keyString.toLowerCase();
+        this.input.value += event.key.toLowerCase();
       }
     }
 

src/scripts/lib/utils.test.ts

@@ -15,6 +15,7 @@ import {
   sanitise,
   sortByAlpha,
   sortByScore,
+  parseCustomProperties,
 } from './utils';
 
 describe('utils', () => {
@@ -256,4 +257,25 @@ describe('utils', () => {
       expect(output).to.deep.equal(['baz']);
     });
   });
+
+  describe('_parseCustomProperties', () => {
+    describe('when custom properties are valid json', () => {
+      it('returns the properties as object', () => {
+        const customProperties = '{"description": "foo", "bar": "foo"}';
+        const result = { description: 'foo', bar: 'foo' };
+
+        const value = parseCustomProperties(customProperties);
+        expect(value).to.eql(result);
+      });
+    });
+    describe('when custom properties are undefined', () => {
+      it('returns an empty object', () => {
+        const customProperties = undefined;
+        const result = {};
+
+        const value = parseCustomProperties(customProperties);
+        expect(value).to.eql(result);
+      });
+    });
+  });
 });

src/scripts/lib/utils.ts

@@ -200,3 +200,15 @@ export const getClassNamesSelector = (
 
   return `.${option}`;
 };
+
+export const parseCustomProperties = (customProperties): any => {
+  if (typeof customProperties !== 'undefined') {
+    try {
+      return JSON.parse(customProperties);
+    } catch (e) {
+      return customProperties;
+    }
+  }
+
+  return {};
+};