@tunghtml/strapi-plugin-composite-field 1.2.7 → 1.2.9

package/README.md

@@ -141,6 +141,7 @@ Enable **Auto-generate** in Advanced settings to automatically update the compos
 - If you manually edit the composite field, it will preserve your changes
 - When any source field changes, auto-generation resumes with the new values
 - This prevents accidental overwrites while maintaining automatic updates
+- Opening an existing entry keeps its saved value: the field is only regenerated after a source field changes, so the entry is not marked as modified on load
 
 ### Space-Only Separator
 
@@ -175,6 +176,19 @@ Result: Panel Discussion - John Doe
 
 ## Changelog
 
+### v1.2.9 (2026-10-19)
+
+**🔧 Technical:**
+
+- Value formatting and joining moved out of the component, regexes use `RegExp.exec`
+
+### v1.2.8 (2026-10-19)
+
+**🐛 Bug Fixes:**
+
+- Opening an existing entry no longer regenerates the composite value, which marked the form as modified and rewrote the stored value on the next save
+- Loading another entry or resetting the form takes the loaded value as the new starting point
+
 ### v1.2.4 (2026-02-05)
 
 **🎯 Improvements:**

package/admin/src/components/CompositeInput.jsx

@@ -5,6 +5,57 @@ import get from 'lodash/get';
 import React from 'react';
 import { useIntl } from 'react-intl';
 
+const ISO_DATE_REGEX = /^(\d{4})-(\d{2})-(\d{2})(T[\d:.]+Z?)?$/;
+const TIME_REGEX = /^(\d{2}):(\d{2}):(\d{2})(\.\d{3})?$/;
+
+// Format a source value for display (especially time/date)
+const formatFieldValue = (val) => {
+  if (val === null || val === undefined) return '';
+
+  // If it's a Date object
+  if (val instanceof Date) {
+    return val.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+  }
+
+  const stringVal = String(val);
+
+  // ISO date (YYYY-MM-DDTHH:MM:SS.sssZ or YYYY-MM-DD) => MM/DD/YYYY
+  const dateMatch = ISO_DATE_REGEX.exec(stringVal);
+  if (dateMatch) {
+    const [, year, month, day] = dateMatch;
+    return `${month}/${day}/${year}`;
+  }
+
+  // Time (HH:MM:SS.mmm or HH:MM:SS) => HH:MM
+  const timeMatch = TIME_REGEX.exec(stringVal);
+  if (timeMatch) {
+    return `${timeMatch[1]}:${timeMatch[2]}`;
+  }
+
+  return stringVal;
+};
+
+// Text of one source value: relations/objects use their name, title or label
+const toDisplayText = (rawValue) => {
+  if (rawValue === null || rawValue === undefined) return '';
+  if (typeof rawValue === 'object' && !(rawValue instanceof Date)) {
+    return String(rawValue.name || rawValue.title || rawValue.label || '');
+  }
+  return formatFieldValue(rawValue);
+};
+
+// A space-only separator joins with single spaces, other separators get spaces around them
+const joinParts = (parts, separator) => {
+  const cleanSeparator = separator.trim();
+  return cleanSeparator === ''
+    ? parts.join(' ').trim()
+    : parts.join(` ${cleanSeparator} `).trim();
+};
+
 const CompositeInput = (props) => {
   const {
     attribute,
@@ -28,10 +79,15 @@ const CompositeInput = (props) => {
   const [isManuallyEdited, setIsManuallyEdited] = React.useState(false);
 
   const lastGeneratedVal = React.useRef(value || '');
-  const lastWatchedValues = React.useRef([]);
+  // Source values the field was last generated from; null until the form has loaded
+  const lastWatchedValues = React.useRef(null);
 
   React.useEffect(() => {
     const validValue = value || '';
+    // A value this field did not produce (another entry loaded, form reset) is a new baseline
+    if (validValue !== lastGeneratedVal.current) {
+      lastWatchedValues.current = null;
+    }
     setLocalValue(validValue);
     lastGeneratedVal.current = validValue;
     // Reset manual edit flag when value changes from outside (e.g., form reset)
@@ -64,43 +120,6 @@ const CompositeInput = (props) => {
     }
   };
 
-  // Helper function to format values (especially time/date)
-  const formatFieldValue = React.useCallback((val) => {
-    if (val === null || val === undefined) return '';
-
-    // If it's a Date object
-    if (val instanceof Date) {
-      return val.toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false,
-      });
-    }
-
-    const stringVal = String(val);
-
-    // Check if value is ISO date format (YYYY-MM-DDTHH:MM:SS.sssZ or YYYY-MM-DD)
-    const isoDateRegex = /^(\d{4})-(\d{2})-(\d{2})(T[\d:.]+Z?)?$/;
-    const dateMatch = stringVal.match(isoDateRegex);
-
-    if (dateMatch) {
-      // Return in MM/DD/YYYY format
-      const [, year, month, day] = dateMatch;
-      return `${month}/${day}/${year}`;
-    }
-
-    // Check if value is time format (HH:MM:SS.mmm or HH:MM:SS)
-    const timeRegex = /^(\d{2}):(\d{2}):(\d{2})(\.\d{3})?$/;
-    const timeMatch = stringVal.match(timeRegex);
-
-    if (timeMatch) {
-      // Return only HH:MM
-      return `${timeMatch[1]}:${timeMatch[2]}`;
-    }
-
-    return stringVal;
-  }, []);
-
   const handleGenerate = React.useCallback(() => {
     // Calculate parent path to resolve relative field names
     const parts = name.split('.');
@@ -108,44 +127,15 @@ const CompositeInput = (props) => {
     parts.pop(); // Remove current field name
     const parentPath = parts.join('.');
 
-    const generatedParts = [];
+    const generatedParts = fields
+      .map((fieldName) => {
+        // Resolve full path for the target field
+        const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+        return toDisplayText(get(values, fullPath));
+      })
+      .filter(Boolean);
 
-    fields.forEach((fieldName) => {
-      // Resolve full path for the target field
-      const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
-
-      // Get raw value from form values
-      let rawValue = get(values, fullPath);
-
-      // Handle different value types
-      if (rawValue !== null && rawValue !== undefined) {
-        let stringValue = '';
-
-        // Handle relations/objects
-        if (typeof rawValue === 'object' && !(rawValue instanceof Date)) {
-          if (rawValue.name) stringValue = String(rawValue.name);
-          else if (rawValue.title) stringValue = String(rawValue.title);
-          else if (rawValue.label) stringValue = String(rawValue.label);
-        } else {
-          stringValue = formatFieldValue(rawValue);
-        }
-
-        if (stringValue) {
-          generatedParts.push(stringValue);
-        }
-      }
-    });
-
-    // Handle separator logic - if separator is just a space, don't add extra spaces
-    const cleanSeparator = separator.trim();
-    let result;
-    if (cleanSeparator === '') {
-      // If separator is just spaces, use single space
-      result = generatedParts.join(' ').trim();
-    } else {
-      // For other separators, add spaces around them
-      result = generatedParts.join(` ${cleanSeparator} `).trim();
-    }
+    const result = joinParts(generatedParts, separator);
 
     if (result !== lastGeneratedVal.current) {
       setLocalValue(result);
@@ -157,7 +147,7 @@ const CompositeInput = (props) => {
         onChange({ target: { name, value: result, type: 'text' } });
       }
     }
-  }, [fields, separator, onChange, name, values, formatFieldValue]);
+  }, [fields, separator, onChange, name, values]);
 
   // Watch only the relevant field values to trigger auto-generation
   const watchedValues = React.useMemo(() => {
@@ -177,13 +167,19 @@ const CompositeInput = (props) => {
 
     // Check if watched values actually changed
     const currentWatchedValues = JSON.stringify(watchedValues);
-    const lastWatchedValuesStr = JSON.stringify(lastWatchedValues.current);
+
+    // Keep the saved value when an entry opens: regenerating it there marks the form as
+    // modified and overwrites values written by the server on the next save
+    if (lastWatchedValues.current === null) {
+      lastWatchedValues.current = currentWatchedValues;
+      return;
+    }
 
     // Only auto-generate if:
     // 1. Values actually changed
     // 2. User hasn't manually edited the field
-    if (currentWatchedValues !== lastWatchedValuesStr) {
-      lastWatchedValues.current = watchedValues;
+    if (currentWatchedValues !== lastWatchedValues.current) {
+      lastWatchedValues.current = currentWatchedValues;
 
       if (!isManuallyEdited) {
         const timeoutId = setTimeout(() => {

package/package.json

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