fix: Improve Flexible field context detection (#4) (#5)

Merge fix for Flexible field context detection (#4)

Author: iamgerwin

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to `nova-dependency-container` will be documented in this file.
 
+## [1.0.6] - 2025-11-25
+
+### Fixed
+- Fixed Flexible field context detection when container attribute is empty ([#4](https://github.com/iamgerwin/nova-dependency-container/issues/4))
+- Fixed cross-group event contamination in Flexible layouts
+
+### Added
+- Added `cachedContextPrefix` for improved performance and reliability
+- Added `extractPrefixFromAttribute()` method for better prefix extraction
+- Added cross-group event filtering to prevent dependency interference between Flexible groups
+
+### Changed
+- Enhanced `getFlexibleContextPrefix()` to check child field attributes when container attribute is empty
+- Enhanced `handleFieldChanged()` to filter events by Flexible group context
+- Updated documentation with improved context detection details
+
+### Technical
+- Implemented context prefix caching from field-changed events
+- Implemented cross-group event filtering in FormField.vue
+- Updated both `FormField.vue` and `DetailField.vue` components
+
 ## [1.0.5] - 2025-11-25
 
 ### Added

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "iamgerwin/nova-dependency-container",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "description": "A Laravel Nova 4 and 5 field container allowing to depend on other fields values",
     "keywords": [
         "laravel",

docs/flexible-field-support.md

@@ -130,11 +130,25 @@ If a field remains hidden when it should be visible:
 
 ### Context Detection
 
-The Flexible context is detected by examining:
+The Flexible context is detected by examining (in order of priority):
 
-1. The container's own `attribute` property
-2. Sibling field `attribute` properties
-3. Parent component structure
+1. Cached context prefix from previous field-changed events
+2. The container's own `attribute` property
+3. Child field `attribute` properties (inside the dependency container)
+4. Cached dependent field values
+5. Parent component structure
+
+The context prefix is cached once detected, improving performance and reliability for subsequent dependency checks.
+
+### Cross-Group Event Filtering
+
+When a field changes inside a Flexible layout, the event is broadcast globally. The dependency container automatically filters events to only process those from the same Flexible group:
+
+- Events with a prefix matching the container's context are processed
+- Events from different Flexible groups (different index) are ignored
+- Non-prefixed events are processed normally (for non-Flexible contexts)
+
+This ensures that changing a field in Overlay Item #1 doesn't affect the dependent fields in Overlay Item #2.
 
 ### Regex Patterns Used
 
@@ -154,6 +168,7 @@ The Flexible context is detected by examining:
 
 ## Version History
 
+- **1.0.6**: Improved Flexible field context detection and cross-group event filtering
 - **1.0.5**: Added Flexible field support (this feature)
 - **1.0.4**: Nova 4.35.x compatibility fixes
 - **1.0.0**: Initial release

resources/js/components/DetailField.vue

@@ -19,6 +19,7 @@ export default {
     return {
       dependentFieldValues: {},
       isVisible: false,
+      cachedContextPrefix: null,
     };
   },
 
@@ -177,37 +178,62 @@ export default {
       return [];
     },
 
+    /**
+     * Extract the prefix (e.g., "overlay_items__0__") from a full attribute.
+     */
+    extractPrefixFromAttribute(attribute) {
+      if (!attribute) return null;
+
+      // Pattern 1: Double underscore format (e.g., "overlay_items__0__field_name")
+      const underscoreMatch = attribute.match(/^(.+__\d+__)/);
+      if (underscoreMatch) {
+        return underscoreMatch[1];
+      }
+
+      // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
+      const bracketMatch = attribute.match(/^(.+\[\d+\]\[)/);
+      if (bracketMatch) {
+        return bracketMatch[1];
+      }
+
+      return null;
+    },
+
     /**
      * Detect the Flexible field context prefix from the container's own field attribute.
      * Flexible fields use prefixes like: flexible_key__index__ or flexible_key[index]
      */
     getFlexibleContextPrefix() {
+      // Return cached prefix if available
+      if (this.cachedContextPrefix) {
+        return this.cachedContextPrefix;
+      }
+
       // Check if this container has a prefixed attribute (indicating it's inside a Flexible field)
       const ownAttribute = this.field?.attribute || '';
 
       // Pattern 1: Double underscore format (e.g., "overlay_items__0__field_name")
       const underscoreMatch = ownAttribute.match(/^(.+__\d+__)/);
       if (underscoreMatch) {
-        return underscoreMatch[1];
+        this.cachedContextPrefix = underscoreMatch[1];
+        return this.cachedContextPrefix;
       }
 
       // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
       const bracketMatch = ownAttribute.match(/^(.+\[\d+\]\[)/);
       if (bracketMatch) {
-        return bracketMatch[1];
+        this.cachedContextPrefix = bracketMatch[1];
+        return this.cachedContextPrefix;
       }
 
-      // Try to detect from parent/sibling field attributes
-      const siblingFields = this.field?.fields || [];
-      for (const sibling of siblingFields) {
-        if (sibling.attribute) {
-          const siblingUnderscoreMatch = sibling.attribute.match(/^(.+__\d+__)/);
-          if (siblingUnderscoreMatch) {
-            return siblingUnderscoreMatch[1];
-          }
-          const siblingBracketMatch = sibling.attribute.match(/^(.+\[\d+\]\[)/);
-          if (siblingBracketMatch) {
-            return siblingBracketMatch[1];
+      // Try to detect from child field attributes (inside the container)
+      const childFields = this.field?.fields || [];
+      for (const child of childFields) {
+        if (child.attribute) {
+          const childPrefix = this.extractPrefixFromAttribute(child.attribute);
+          if (childPrefix) {
+            this.cachedContextPrefix = childPrefix;
+            return this.cachedContextPrefix;
           }
         }
       }

resources/js/components/FormField.vue

@@ -43,6 +43,7 @@ export default {
     return {
       dependentFieldValues: {},
       isVisible: false,
+      cachedContextPrefix: null,
     };
   },
 
@@ -84,17 +85,55 @@ export default {
 
     handleFieldChanged(event) {
       const fullAttribute = event.field.attribute;
+      const eventPrefix = this.extractPrefixFromAttribute(fullAttribute);
+      const currentPrefix = this.getFlexibleContextPrefix();
+
+      // For Flexible fields: only process events from the same group context
+      // If both have prefixes, they must match; if neither has prefix, process normally
+      if (eventPrefix && currentPrefix) {
+        if (eventPrefix !== currentPrefix) {
+          // Event is from a different Flexible group, ignore it
+          return;
+        }
+      }
+
       this.dependentFieldValues[fullAttribute] = event.value;
 
       // Also store by base attribute name (without Flexible prefix) for easier lookup
       const baseAttribute = this.extractBaseAttribute(fullAttribute);
       if (baseAttribute && baseAttribute !== fullAttribute) {
         this.dependentFieldValues[baseAttribute] = event.value;
+
+        // Cache the context prefix from incoming events for better Flexible field detection
+        if (!this.cachedContextPrefix && eventPrefix) {
+          this.cachedContextPrefix = eventPrefix;
+        }
       }
 
       this.checkDependencies();
     },
 
+    /**
+     * Extract the prefix (e.g., "overlay_items__0__") from a full attribute.
+     */
+    extractPrefixFromAttribute(attribute) {
+      if (!attribute) return null;
+
+      // Pattern 1: Double underscore format (e.g., "overlay_items__0__field_name")
+      const underscoreMatch = attribute.match(/^(.+__\d+__)/);
+      if (underscoreMatch) {
+        return underscoreMatch[1];
+      }
+
+      // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
+      const bracketMatch = attribute.match(/^(.+\[\d+\]\[)/);
+      if (bracketMatch) {
+        return bracketMatch[1];
+      }
+
+      return null;
+    },
+
     /**
      * Extract the base attribute name from a potentially prefixed Flexible field attribute.
      * e.g., "overlay_items__0__type" -> "type"
@@ -292,36 +331,49 @@ export default {
      * Flexible fields use prefixes like: flexible_key__index__ or flexible_key[index]
      */
     getFlexibleContextPrefix() {
+      // Return cached prefix if available (detected from field-changed events)
+      if (this.cachedContextPrefix) {
+        return this.cachedContextPrefix;
+      }
+
       // Check if this container has a prefixed attribute (indicating it's inside a Flexible field)
       const ownAttribute = this.field?.attribute || '';
 
       // Pattern 1: Double underscore format (e.g., "overlay_items__0__field_name")
       const underscoreMatch = ownAttribute.match(/^(.+__\d+__)/);
       if (underscoreMatch) {
-        return underscoreMatch[1];
+        this.cachedContextPrefix = underscoreMatch[1];
+        return this.cachedContextPrefix;
       }
 
       // Pattern 2: Bracket format (e.g., "overlay_items[0][field_name]")
       const bracketMatch = ownAttribute.match(/^(.+\[\d+\]\[)/);
       if (bracketMatch) {
-        return bracketMatch[1];
+        this.cachedContextPrefix = bracketMatch[1];
+        return this.cachedContextPrefix;
       }
 
-      // Try to detect from parent/sibling field attributes
-      const siblingFields = this.field?.fields || [];
-      for (const sibling of siblingFields) {
-        if (sibling.attribute) {
-          const siblingUnderscoreMatch = sibling.attribute.match(/^(.+__\d+__)/);
-          if (siblingUnderscoreMatch) {
-            return siblingUnderscoreMatch[1];
-          }
-          const siblingBracketMatch = sibling.attribute.match(/^(.+\[\d+\]\[)/);
-          if (siblingBracketMatch) {
-            return siblingBracketMatch[1];
+      // Try to detect from child field attributes (inside the container)
+      const childFields = this.field?.fields || [];
+      for (const child of childFields) {
+        if (child.attribute) {
+          const childPrefix = this.extractPrefixFromAttribute(child.attribute);
+          if (childPrefix) {
+            this.cachedContextPrefix = childPrefix;
+            return this.cachedContextPrefix;
           }
         }
       }
 
+      // Try to detect from cached dependent field values
+      for (const attr of Object.keys(this.dependentFieldValues)) {
+        const prefix = this.extractPrefixFromAttribute(attr);
+        if (prefix) {
+          this.cachedContextPrefix = prefix;
+          return this.cachedContextPrefix;
+        }
+      }
+
       return null;
     },