Merge a00350d14e into ebbea8c3b0

README.md

@@ -372,6 +372,23 @@ Pass an array of objects:
 
 **Usage:** The maximum amount of search results to show.
 
+### shadowRoot
+
+**Type:** Document Element **Default:** null
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** You can pass along the shadowRoot from your application like so.
+
+```js
+var shadowRoot = document
+  .getElementById('wrapper')
+  .attachShadow({ mode: 'open' });
+var choices = new Choices({
+  shadowRoot: shadowRoot,
+});
+```
+
 ### position
 
 **Type:** `String` **Default:** `auto`

src/scripts/choices.ts

@@ -128,6 +128,10 @@ class Choices {
       // instead of concatenating with the default array
       { arrayMerge: (_, sourceArray) => [...sourceArray] },
     );
+    // Restore the shadowRoot if provided. deeperge converts it into an empty object.
+    if (userConfig.shadowRoot) {
+      this.config.shadowRoot = userConfig.shadowRoot;
+    }
 
     const invalidConfigOptions = diff(this.config, DEFAULT_CONFIG);
     if (invalidConfigOptions.length) {
@@ -1308,7 +1312,7 @@ class Choices {
   }
 
   _addEventListeners(): void {
-    const { documentElement } = document;
+    const documentElement = this.config.shadowRoot || document.documentElement;
 
     // capture events - can cancel event processing or propagation
     documentElement.addEventListener('touchend', this._onTouchEnd, true);
@@ -1362,7 +1366,7 @@ class Choices {
   }
 
   _removeEventListeners(): void {
-    const { documentElement } = document;
+    const documentElement = this.config.shadowRoot || document.documentElement;
 
     documentElement.removeEventListener('touchend', this._onTouchEnd, true);
     this.containerOuter.element.removeEventListener(

src/scripts/constants.ts

@@ -60,6 +60,7 @@ export const DEFAULT_CONFIG: Options = {
   shouldSort: true,
   shouldSortItems: false,
   sorter: sortByAlpha,
+  shadowRoot: null,
   placeholder: true,
   placeholderValue: null,
   searchPlaceholderValue: null,

src/scripts/interfaces.ts

@@ -503,6 +503,11 @@ export interface Options {
    */
   resetScrollPosition: boolean;
 
+  /**
+   * The shadow root for use within ShadowDom
+   */
+  shadowRoot: any;
+
   /**
    * Whether choices and groups should be sorted. If false, choices/groups will appear in the order they were given.
    *