@tunghtml/strapi-plugin-composite-field 1.1.5 → 1.1.6

package/dist/_chunks/{CompositeInput-C_wtVXHq.js → CompositeInput-BhDBr5rx.js}

@@ -516,29 +516,47 @@ const CompositeInput = (props) => {
   }, [fields, separator, onChange, name]);
   React__namespace.default.useEffect(() => {
     if (!autoGenerate || fields.length === 0) return;
+    let debounceTimer;
     const handleFieldChange = () => {
-      setTimeout(() => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
         handleGenerate();
       }, 300);
     };
     const listeners = [];
+    const observers = [];
     fields.forEach((fieldPath) => {
       const elements = document.querySelectorAll(
-        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"], div[role="combobox"][name="${fieldPath}"]`
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"]`
       );
       elements.forEach((element) => {
         element.addEventListener("change", handleFieldChange);
         element.addEventListener("input", handleFieldChange);
-        element.addEventListener("click", handleFieldChange);
         listeners.push({ element, handler: handleFieldChange });
       });
+      const combobox = document.querySelector(
+        `div[role="combobox"][name="${fieldPath}"]`
+      );
+      if (combobox) {
+        const observer = new MutationObserver(handleFieldChange);
+        observer.observe(combobox, {
+          childList: true,
+          subtree: true,
+          characterData: true
+        });
+        observers.push(observer);
+        combobox.addEventListener("click", handleFieldChange);
+        listeners.push({ element: combobox, handler: handleFieldChange });
+      }
     });
     return () => {
+      clearTimeout(debounceTimer);
       listeners.forEach(({ element, handler }) => {
         element.removeEventListener("change", handler);
         element.removeEventListener("input", handler);
         element.removeEventListener("click", handler);
       });
+      observers.forEach((observer) => observer.disconnect());
     };
   }, [autoGenerate, fields, handleGenerate]);
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/_chunks/{CompositeInput-CF-LA05U.mjs → CompositeInput-DLjmxeUG.mjs}

@@ -497,29 +497,47 @@ const CompositeInput = (props) => {
   }, [fields, separator, onChange, name]);
   React__default.useEffect(() => {
     if (!autoGenerate || fields.length === 0) return;
+    let debounceTimer;
     const handleFieldChange = () => {
-      setTimeout(() => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
         handleGenerate();
       }, 300);
     };
     const listeners = [];
+    const observers = [];
     fields.forEach((fieldPath) => {
       const elements = document.querySelectorAll(
-        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"], div[role="combobox"][name="${fieldPath}"]`
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"]`
       );
       elements.forEach((element) => {
         element.addEventListener("change", handleFieldChange);
         element.addEventListener("input", handleFieldChange);
-        element.addEventListener("click", handleFieldChange);
         listeners.push({ element, handler: handleFieldChange });
       });
+      const combobox = document.querySelector(
+        `div[role="combobox"][name="${fieldPath}"]`
+      );
+      if (combobox) {
+        const observer = new MutationObserver(handleFieldChange);
+        observer.observe(combobox, {
+          childList: true,
+          subtree: true,
+          characterData: true
+        });
+        observers.push(observer);
+        combobox.addEventListener("click", handleFieldChange);
+        listeners.push({ element: combobox, handler: handleFieldChange });
+      }
     });
     return () => {
+      clearTimeout(debounceTimer);
       listeners.forEach(({ element, handler }) => {
         element.removeEventListener("change", handler);
         element.removeEventListener("input", handler);
         element.removeEventListener("click", handler);
       });
+      observers.forEach((observer) => observer.disconnect());
     };
   }, [autoGenerate, fields, handleGenerate]);
   return /* @__PURE__ */ jsx(

package/dist/admin/index.js

@@ -37,7 +37,7 @@ const index = {
         defaultMessage: "Combine multiple fields into one display value"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-C_wtVXHq.js"))
+        Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-BhDBr5rx.js"))
       },
       options: {
         base: [

package/dist/admin/index.mjs

@@ -34,7 +34,7 @@ const index = {
         defaultMessage: "Combine multiple fields into one display value"
       },
       components: {
-        Input: async () => import("../_chunks/CompositeInput-CF-LA05U.mjs")
+        Input: async () => import("../_chunks/CompositeInput-DLjmxeUG.mjs")
       },
       options: {
         base: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tunghtml/strapi-plugin-composite-field",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "A Strapi v5 plugin to create composite display fields by combining multiple text, string, and enum fields with auto-generate support",
   "keywords": [
     "strapi",