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

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

@@ -466,6 +466,15 @@ const CompositeInput = (props) => {
       onChange({ target: { name, value: newValue, type: "text" } });
     }
   };
+  const formatTimeValue = (value2) => {
+    if (!value2) return value2;
+    const timeRegex = /^(\d{2}):(\d{2}):(\d{2})(\.\d{3})?$/;
+    const match = value2.match(timeRegex);
+    if (match) {
+      return `${match[1]}:${match[2]}`;
+    }
+    return value2;
+  };
   const handleGenerate = React__namespace.default.useCallback(() => {
     const parts = [];
     fields.forEach((fieldPath) => {
@@ -504,6 +513,7 @@ const CompositeInput = (props) => {
         }
       }
       if (fieldValue) {
+        fieldValue = formatTimeValue(fieldValue);
         parts.push(fieldValue);
       }
     });
@@ -516,29 +526,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-ef71gPFZ.mjs}

@@ -447,6 +447,15 @@ const CompositeInput = (props) => {
       onChange({ target: { name, value: newValue, type: "text" } });
     }
   };
+  const formatTimeValue = (value2) => {
+    if (!value2) return value2;
+    const timeRegex = /^(\d{2}):(\d{2}):(\d{2})(\.\d{3})?$/;
+    const match = value2.match(timeRegex);
+    if (match) {
+      return `${match[1]}:${match[2]}`;
+    }
+    return value2;
+  };
   const handleGenerate = React__default.useCallback(() => {
     const parts = [];
     fields.forEach((fieldPath) => {
@@ -485,6 +494,7 @@ const CompositeInput = (props) => {
         }
       }
       if (fieldValue) {
+        fieldValue = formatTimeValue(fieldValue);
         parts.push(fieldValue);
       }
     });
@@ -497,29 +507,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-Bjv6XSUB.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-ef71gPFZ.mjs")
       },
       options: {
         base: [

package/package.json

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