[6540] Inherited item selector field issues

ui/guest/src/contentController.ts

@@ -170,9 +170,9 @@ export function byPathFetchIfNotLoaded(path: string): Observable<ContentInstance
     return of(null);
   } else if (requestedPaths[path]) {
     return paths$.pipe(
+      take(1),
       filter((paths) => Boolean(paths[path])),
-      map((paths) => paths[path]),
-      map((modelId) => models$.value[modelId])
+      map((paths) => models$.value[paths[path]])
     );
   } else {
     requestedPaths[path] = true;

ui/guest/src/elementRegistry.ts

@@ -48,6 +48,8 @@ let db: LookupTable<ElementRecord> = {};
 // Lookup table of element record id arrays, indexed by iceId
 let registry: LookupTable<number[]> = {};
 
+export let inheritorsModelIdsMap = {};
+
 export function get(id: number): ElementRecord {
   const record = db[id];
   record && nullOrUndefined(record.label) && setLabel(record);
@@ -133,18 +135,18 @@ export function register(payload: ElementRecordRegistration): number {
         ? fieldId
         : fieldId.split(',').map((str) => str.trim());
 
-  function create() {
+  function create(inheritanceParentModelId?: string) {
     // Create/register the physical record
     db[id] = {
       id,
       element,
-      modelId,
+      modelId: inheritanceParentModelId ?? modelId,
       index,
       label,
       fieldId: fieldIds,
       iceIds,
       complete: false,
-      inherited: fieldIds.some((fieldId) => isInheritedField(modelId, fieldId))
+      inherited: fieldIds.some((fieldId) => isInheritedField(inheritanceParentModelId ?? modelId, fieldId))
     };
   }
 
@@ -154,11 +156,13 @@ export function register(payload: ElementRecordRegistration): number {
     // for the model to be loaded.
     if (isInheritedField(model.craftercms.id, fieldId)) {
       byPathFetchIfNotLoaded(model.craftercms.sourceMap?.[fieldId]).subscribe((response) => {
+        const modelIdToRegister = response.craftercms.id;
+        inheritorsModelIdsMap[`${modelIdToRegister}-${fieldId}`] = modelId;
         model$(response.craftercms.id)
           .pipe(take(1))
           .subscribe(() => {
-            create();
-            completeDeferredRegistration(id);
+            create(modelIdToRegister);
+            completeDeferredRegistration(id, modelIdToRegister);
           });
       });
     } else {
@@ -183,21 +187,21 @@ export function register(payload: ElementRecordRegistration): number {
   return id;
 }
 
-export function completeDeferredRegistration(id: number): void {
+export function completeDeferredRegistration(id: number, inheritanceParentModelId?: string): void {
   const record = db[id];
   const { modelId, index, fieldId: fieldIds, iceIds } = record;
 
   if (fieldIds.length > 0) {
     fieldIds.forEach((fieldId) => {
-      const iceId = iceRegistry.register({ modelId, index, fieldId });
+      const iceId = iceRegistry.register({ modelId: inheritanceParentModelId ?? modelId, index, fieldId });
       if (!registry[iceId]) {
         registry[iceId] = [];
       }
       registry[iceId].push(record.id);
       !iceIds.includes(iceId) && iceIds.push(iceId);
     });
   } else {
-    const iceId = iceRegistry.register({ modelId, index });
+    const iceId = iceRegistry.register({ modelId: inheritanceParentModelId ?? modelId, index });
     if (!registry[iceId]) {
       registry[iceId] = [];
     }
@@ -442,6 +446,7 @@ export function flush(): void {
   db = {};
   registry = {};
   iceRegistry.flush();
+  inheritorsModelIdsMap = {};
 }
 
 export function getRegistry(): typeof db {

ui/guest/src/react/GuestProxy.tsx

@@ -17,7 +17,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useGuestContext, useSelector } from './GuestContext';
 import * as ElementRegistry from '../elementRegistry';
-import { getParentElementFromICEProps } from '../elementRegistry';
+import { getParentElementFromICEProps, inheritorsModelIdsMap } from '../elementRegistry';
 import * as iceRegistry from '../iceRegistry';
 import $ from '../jquery';
 import {
@@ -422,9 +422,15 @@ export function GuestProxy() {
 
               ifrm.onload = function () {
                 spinner.remove();
-                const itemElement = ifrm.contentWindow.document.documentElement.querySelector(
+                let itemElement = ifrm.contentWindow.document.documentElement.querySelector(
                   `[data-craftercms-model-id="${modelId}"][data-craftercms-field-id="${fieldId}"][data-craftercms-index="${targetIndex}"]`
                 );
+                if (!itemElement) {
+                  const inheritedModelId = inheritorsModelIdsMap[`${modelId}-${fieldId}`];
+                  itemElement = ifrm.contentWindow.document.documentElement.querySelector(
+                    `[data-craftercms-model-id="${inheritedModelId}"][data-craftercms-field-id="${fieldId}"][data-craftercms-index="${targetIndex}"]`
+                  );
+                }
                 let component = document.createElement('div');
                 component.innerHTML = itemElement?.outerHTML;
                 component = component.firstChild as HTMLDivElement;

ui/guest/src/react/ZoneMenu.tsx

@@ -180,7 +180,7 @@ export function ZoneMenu(props: ZoneMenuProps) {
     const itemFieldId = isNodeSelectorItem ? nodeSelectorItemRecord.fieldId : fieldId;
     const itemIndex = isNodeSelectorItem ? nodeSelectorItemRecord.index : index;
     const parentModelId = getParentModelId(itemModelId, models, modelHierarchyMap);
-    const path = models[parentModelId ?? itemModelId].craftercms.path;
+    const path = modelPath;
     return { path, itemModelId, itemFieldId, itemIndex };
   };