platypicker 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "platypicker",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": false,
   "main": "dist/platypicker.min.js",
   "files": [
@@ -11,6 +11,9 @@
   "exports": {
     ".": "./dist/platypicker.min.js"
   },
+  "dependencies": {
+    "bootstrap": "^5.3.8"
+  },
   "devDependencies": {
     "clean-css-cli": "^5.6.3",
     "terser": "^5.46.0"

package/src/platypicker.js

@@ -173,15 +173,16 @@ export default class Platypicker {
         }, true);
 
         // Watch the select element's options for additions or removals, mirroring the structure every time.
-        this.#optionsChangeMutationObserver = new MutationObserver(() => {
+        this.#optionsChangeMutationObserver = new MutationObserver(Platypicker.#debounce(() => {
             // If the options count has changed (added/removed options) or it has stayed the same, but some options
             // have been swapped (detected by the custom selectMenuOption property), regenerate the list items.
             // This helps to not needlessly regenerate every time the slightest change is made, or the options
             // have been manually regenerated by calling the #setListItems() method.
-            if (this.#select.options.length !== this.#select.length || [...this.#select.options].some(o => !o["option"]))
+            if (this.#select.options.length !== this.#select.length ||
+                [...this.#select.options].some(o => !o["option"]))
                 this.#setListItems();
-        });
-        this.#optionsChangeMutationObserver.observe(selectElement, { childList: true });
+        }, 100));
+        this.#optionsChangeMutationObserver.observe(selectElement, { childList: true, subtree: true });
 
         Platypicker.#selects.set(this.#select, this);
     }
@@ -447,7 +448,7 @@ export default class Platypicker {
         }
     }
 
-    #destroy() {
+    destroy() {
         if (!Platypicker.#selects.has(this.#select)) return;
 
         this.#select.removeEventListener("change", this.#selectChangeListener);