fix: resolve lookup field display issues in ListView, DetailView, and DetailSection

Copilot · hotlong · Copilot · commit 46d524831014 · 2026-03-01T15:52:05.000Z
Bug 1 (ListView): Gate data fetch on objectDefLoaded to prevent race condition
where $expand is empty on first fetch due to async objectDef loading.

Bug 2 (DetailView): Load objectSchema via getObjectSchema, compute $expand
fields, and pass them to findOne() so lookup/master_detail fields are expanded.

Bug 3 (DetailSection): Accept objectSchema prop and enrich fields missing
type/options/currency from objectSchema metadata before rendering.

Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/packages/plugin-detail/src/DetailSection.tsx b/packages/plugin-detail/src/DetailSection.tsx
@@ -33,6 +33,8 @@ export interface DetailSectionProps {
   section: DetailViewSectionType;
   data?: any;
   className?: string;
+  /** Object schema from DataSource for field type enrichment */
+  objectSchema?: any;
   /** Whether inline editing is active */
   isEditing?: boolean;
   /** Callback when a field value changes during inline editing */
@@ -43,6 +45,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
   section,
   data,
   className,
+  objectSchema,
   isEditing = false,
   onFieldChange,
 }) => {
@@ -75,11 +78,24 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
 
     const displayValue = (() => {
       if (value === null || value === undefined) return '-';
-      // Use type-aware cell renderer when field.type is available
-      if (field.type) {
-        const CellRenderer = getCellRenderer(field.type);
+      // Enrich field with objectSchema metadata when field.type is not set
+      const objectDefField = objectSchema?.fields?.[field.name];
+      const resolvedType = field.type || objectDefField?.type;
+      const enrichedField: Record<string, any> = { ...field };
+      if (!field.type && objectDefField) {
+        if (objectDefField.type) enrichedField.type = objectDefField.type;
+        if (objectDefField.options && !enrichedField.options) enrichedField.options = objectDefField.options;
+        if (objectDefField.currency && !enrichedField.currency) enrichedField.currency = objectDefField.currency;
+        if (objectDefField.precision !== undefined && enrichedField.precision === undefined) enrichedField.precision = objectDefField.precision;
+        if (objectDefField.format && !enrichedField.format) enrichedField.format = objectDefField.format;
+        if (objectDefField.reference_to && !enrichedField.reference_to) enrichedField.reference_to = objectDefField.reference_to;
+        if (objectDefField.reference_field && !enrichedField.reference_field) enrichedField.reference_field = objectDefField.reference_field;
+      }
+      // Use type-aware cell renderer when field type is available (explicit or enriched)
+      if (resolvedType) {
+        const CellRenderer = getCellRenderer(resolvedType);
         if (CellRenderer) {
-          return <CellRenderer value={value} field={field as unknown as FieldMetadata} />;
+          return <CellRenderer value={value} field={enrichedField as unknown as FieldMetadata} />;
         }
       }
       return String(value);
diff --git a/packages/plugin-detail/src/DetailView.tsx b/packages/plugin-detail/src/DetailView.tsx
@@ -43,6 +43,7 @@ import { RelatedList } from './RelatedList';
 import { RecordComments } from './RecordComments';
 import { ActivityTimeline } from './ActivityTimeline';
 import { SchemaRenderer } from '@object-ui/react';
+import { buildExpandFields } from '@object-ui/core';
 import type { DetailViewSchema, DataSource } from '@object-ui/types';
 
 export interface DetailViewProps {
@@ -73,9 +74,12 @@ export const DetailView: React.FC<DetailViewProps> = ({
   const [isFavorite, setIsFavorite] = React.useState(false);
   const [isInlineEditing, setIsInlineEditing] = React.useState(false);
   const [editedValues, setEditedValues] = React.useState<Record<string, any>>({});
+  const [objectSchema, setObjectSchema] = React.useState<any>(null);
 
-  // Fetch data if API or DataSource provided
+  // Fetch objectSchema + data with $expand when DataSource is provided
   React.useEffect(() => {
+    let isMounted = true;
+
     // If inline data provided, use it
      if (schema.data) {
         setData(schema.data);
@@ -89,40 +93,73 @@ export const DetailView: React.FC<DetailViewProps> = ({
       const resourceId = schema.resourceId;
       const prefix = `${objectName}-`;
 
-      dataSource.findOne(objectName, resourceId).then((result) => {
-        if (result) {
-          setData(result);
-          setLoading(false);
-          return;
+      // Collect all visible field names from sections and top-level fields
+      const allFields = [
+        ...(schema.sections?.flatMap(s => s.fields) || []),
+        ...(schema.fields || []),
+      ];
+
+      // Load objectSchema first, then fetch data with $expand
+      const schemaPromise = dataSource.getObjectSchema
+        ? dataSource.getObjectSchema(objectName).catch(() => null)
+        : Promise.resolve(null);
+
+      schemaPromise.then((resolvedSchema) => {
+        if (!isMounted) return;
+        if (resolvedSchema) {
+          setObjectSchema(resolvedSchema);
         }
-        // Fallback: try alternate ID format for backward compatibility
-        const altId = resourceId.startsWith(prefix)
-          ? resourceId.slice(prefix.length)   // strip prefix
-          : `${prefix}${resourceId}`;          // prepend prefix
-        return dataSource.findOne(objectName, altId).then((fallbackResult) => {
-          setData(fallbackResult);
-          setLoading(false);
-        }).catch(() => {
-          setData(null);
-          setLoading(false);
+
+        // Compute $expand from objectSchema
+        const expandFields = buildExpandFields(resolvedSchema?.fields, allFields);
+        const params = expandFields.length > 0 ? { $expand: expandFields } : undefined;
+
+        return dataSource.findOne(objectName, resourceId, params).then((result) => {
+          if (!isMounted) return;
+          if (result) {
+            setData(result);
+            setLoading(false);
+            return;
+          }
+          // Fallback: try alternate ID format for backward compatibility
+          const altId = resourceId.startsWith(prefix)
+            ? resourceId.slice(prefix.length)   // strip prefix
+            : `${prefix}${resourceId}`;          // prepend prefix
+          return dataSource.findOne(objectName, altId, params).then((fallbackResult) => {
+            if (isMounted) {
+              setData(fallbackResult);
+              setLoading(false);
+            }
+          }).catch(() => {
+            if (isMounted) {
+              setData(null);
+              setLoading(false);
+            }
+          });
         });
       }).catch((err) => {
-         console.error('Failed to fetch detail data:', err);
-         setLoading(false);
+         if (isMounted) {
+           console.error('Failed to fetch detail data:', err);
+           setLoading(false);
+         }
       });
     } else if (schema.api && schema.resourceId) {
       setLoading(true);
       fetch(`${schema.api}/${schema.resourceId}`)
         .then(res => res.json())
         .then(result => {
-          setData(result?.data || result);
+          if (isMounted) {
+            setData(result?.data || result);
+          }
         })
         .catch(err => {
           console.error('Failed to fetch detail data:', err);
         })
-        .finally(() => setLoading(false));
+        .finally(() => { if (isMounted) setLoading(false); });
     }
-  }, [schema.api, schema.resourceId]);
+
+    return () => { isMounted = false; };
+  }, [schema.api, schema.resourceId, schema.objectName, dataSource, schema.sections, schema.fields]);
 
   const handleBack = React.useCallback(() => {
     if (onBack) {
@@ -488,6 +525,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
               key={index}
               section={section}
               data={{ ...data, ...editedValues }}
+              objectSchema={objectSchema}
               isEditing={isInlineEditing}
               onFieldChange={handleInlineFieldChange}
             />
@@ -503,6 +541,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
             columns: schema.columns,
           }}
           data={{ ...data, ...editedValues }}
+          objectSchema={objectSchema}
           isEditing={isInlineEditing}
           onFieldChange={handleInlineFieldChange}
         />
diff --git a/packages/plugin-detail/src/__tests__/DetailSection.test.tsx b/packages/plugin-detail/src/__tests__/DetailSection.test.tsx
@@ -252,4 +252,69 @@ describe('DetailSection', () => {
     expect(grid!.className).toContain('lg:grid-cols-3');
     expect(grid!.className).not.toContain('md:grid-cols-3');
   });
+
+  it('should enrich field type from objectSchema when field.type is not set', () => {
+    const section = {
+      title: 'Info',
+      fields: [{ name: 'status', label: 'Status' }],
+      columns: 1,
+    };
+    const objectSchema = {
+      fields: {
+        status: {
+          type: 'select',
+          options: [
+            { value: 'Draft', label: 'Draft', color: 'yellow' },
+            { value: 'Active', label: 'Active', color: 'green' },
+          ],
+        },
+      },
+    };
+    render(<DetailSection section={section} data={{ status: 'Draft' }} objectSchema={objectSchema} />);
+    // Should render via SelectCellRenderer (displays label), not plain String()
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+  });
+
+  it('should render percent field from objectSchema enrichment', () => {
+    const section = {
+      title: 'Info',
+      fields: [{ name: 'discount', label: 'Discount' }],
+      columns: 1,
+    };
+    const objectSchema = {
+      fields: {
+        discount: { type: 'percent' },
+      },
+    };
+    render(<DetailSection section={section} data={{ discount: 25 }} objectSchema={objectSchema} />);
+    // PercentCellRenderer should format as "25%" 
+    expect(screen.getByText(/25/)).toBeInTheDocument();
+    expect(screen.getByText(/%/)).toBeInTheDocument();
+  });
+
+  it('should fall back to String(value) when neither field.type nor objectSchema provides a type', () => {
+    const section = {
+      title: 'Info',
+      fields: [{ name: 'notes', label: 'Notes' }],
+      columns: 1,
+    };
+    render(<DetailSection section={section} data={{ notes: 'Hello World' }} />);
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('should prefer explicit field.type over objectSchema type', () => {
+    const section = {
+      title: 'Info',
+      fields: [{ name: 'name', label: 'Name', type: 'text' as const }],
+      columns: 1,
+    };
+    const objectSchema = {
+      fields: {
+        name: { type: 'number' },
+      },
+    };
+    render(<DetailSection section={section} data={{ name: 'Alice' }} objectSchema={objectSchema} />);
+    // Should use 'text' renderer, not 'number'
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
 });
diff --git a/packages/plugin-detail/src/__tests__/DetailView.test.tsx b/packages/plugin-detail/src/__tests__/DetailView.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { DetailView } from '../DetailView';
 import type { DetailViewSchema } from '@object-ui/types';
 
@@ -538,4 +538,86 @@ describe('DetailView', () => {
     fireEvent.click(goBackBtn);
     expect(onBack).toHaveBeenCalled();
   });
+
+  it('should call findOne with $expand when objectSchema has lookup fields', async () => {
+    const mockDataSource = {
+      getObjectSchema: vi.fn().mockResolvedValue({
+        fields: {
+          name: { type: 'text' },
+          customer: { type: 'lookup', reference_to: 'contact' },
+          account: { type: 'master_detail', reference_to: 'account' },
+        },
+      }),
+      findOne: vi.fn().mockResolvedValue({ name: 'Order 1', customer: { name: 'Alice' }, account: { name: 'Acme' } }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Order Details',
+      objectName: 'order',
+      resourceId: 'order-1',
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'customer', label: 'Customer' },
+        { name: 'account', label: 'Account' },
+      ],
+    };
+
+    render(<DetailView schema={schema} dataSource={mockDataSource} />);
+
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('order');
+      expect(mockDataSource.findOne).toHaveBeenCalledWith(
+        'order',
+        'order-1',
+        expect.objectContaining({ $expand: expect.arrayContaining(['customer', 'account']) }),
+      );
+    });
+  });
+
+  it('should call findOne without $expand when objectSchema has no lookup fields', async () => {
+    const mockDataSource = {
+      getObjectSchema: vi.fn().mockResolvedValue({
+        fields: {
+          name: { type: 'text' },
+          email: { type: 'text' },
+        },
+      }),
+      findOne: vi.fn().mockResolvedValue({ name: 'Alice', email: 'alice@example.com' }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'c1',
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'email', label: 'Email' },
+      ],
+    };
+
+    render(<DetailView schema={schema} dataSource={mockDataSource} />);
+
+    await waitFor(() => {
+      expect(mockDataSource.findOne).toHaveBeenCalledWith('contact', 'c1', undefined);
+    });
+  });
+
+  it('should still work when getObjectSchema is not available on dataSource', async () => {
+    const mockDataSource = {
+      findOne: vi.fn().mockResolvedValue({ name: 'Bob' }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'c1',
+      fields: [{ name: 'name', label: 'Name' }],
+    };
+
+    const { findByText } = render(<DetailView schema={schema} dataSource={mockDataSource} />);
+    expect(await findByText('Bob')).toBeInTheDocument();
+  });
 });
diff --git a/packages/plugin-list/src/ListView.tsx b/packages/plugin-list/src/ListView.tsx
@@ -364,6 +364,7 @@ export const ListView: React.FC<ListViewProps> = ({
   const [data, setData] = React.useState<any[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [objectDef, setObjectDef] = React.useState<any>(null);
+  const [objectDefLoaded, setObjectDefLoaded] = React.useState(false);
   const [refreshKey, setRefreshKey] = React.useState(0);
   const [dataLimitReached, setDataLimitReached] = React.useState(false);
 
@@ -492,14 +493,21 @@ export const ListView: React.FC<ListViewProps> = ({
   React.useEffect(() => {
     let isMounted = true;
     const fetchObjectDef = async () => {
-      if (!dataSource || !schema.objectName) return;
+      if (!dataSource || !schema.objectName) {
+        setObjectDefLoaded(true);
+        return;
+      }
       try {
         const def = await dataSource.getObjectSchema(schema.objectName);
         if (isMounted) {
           setObjectDef(def);
         }
       } catch (err) {
         console.warn("Failed to fetch object schema for ListView:", err);
+      } finally {
+        if (isMounted) {
+          setObjectDefLoaded(true);
+        }
       }
     };
     fetchObjectDef();
@@ -534,6 +542,9 @@ export const ListView: React.FC<ListViewProps> = ({
       setDataLimitReached(false);
       return;
     }
+
+    // Wait for objectDef to load before fetching data so that $expand is computed
+    if (!objectDefLoaded) return;
     
     const fetchData = async () => {
       if (!dataSource || !schema.objectName) return;
@@ -624,7 +635,7 @@ export const ListView: React.FC<ListViewProps> = ({
     fetchData();
     
     return () => { isMounted = false; };
-  }, [schema.objectName, schema.data, dataSource, schema.filters, effectivePageSize, currentSort, currentFilters, activeQuickFilters, normalizedQuickFilters, userFilterConditions, refreshKey, searchTerm, schema.searchableFields, expandFields]); // Re-fetch on filter/sort/search change
+  }, [schema.objectName, schema.data, dataSource, schema.filters, effectivePageSize, currentSort, currentFilters, activeQuickFilters, normalizedQuickFilters, userFilterConditions, refreshKey, searchTerm, schema.searchableFields, expandFields, objectDefLoaded]); // Re-fetch on filter/sort/search change
 
   // Available view types based on schema configuration
   const availableViews = React.useMemo(() => {
diff --git a/packages/plugin-list/src/__tests__/DataFetch.test.tsx b/packages/plugin-list/src/__tests__/DataFetch.test.tsx
