fix: add keys to ObjectField children and guard relation data in getFieldOptions

react-openapi/components/fields/ObjectField.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Box, Typography } from '@mui/material';
 import { FieldComponentProps } from '../../types/overrides';
 
@@ -15,21 +16,26 @@ export default function ObjectField({ name, field, value, onChange, disabled, ba
       </Typography>
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         {Object.entries(field.schema).map(([subKey, subField]) =>
-          renderField({
+          React.cloneElement(
-            name: `${name}.${subKey}`,
+            renderField({
-            field: subField,
+              name: `${name}.${subKey}`,
-            value: value?.[subKey],
+              field: subField,
-            onChange: (newVal: any) => {
+              value: value?.[subKey],
-              const updated = { ...(value || {}), [subKey]: newVal };
+              onChange: (newVal: any) => {
-              onChange(updated);
+                const updated = { ...(value || {}), [subKey]: newVal };
-            },
+                onChange(updated);
-            disabled,
+              },
-            baseUrl,
+              disabled,
-            uploadFile,
+              baseUrl,
-            uploading,
+              uploadFile,
-            relationDataMap,
+              uploading,
-          })
+              relationDataMap,
+            }) as React.ReactElement,
+            { key: subKey }
+          )
         )}
+
+
       </Box>
     </Box>
   );

react-openapi/utils/options.ts

@@ -16,7 +16,7 @@ export function getFieldOptions(field: ResourceField, relationData?: any[]): Sel
   }
 
   if (field.relation) {
-    const data = relationData ?? [];
+    const data = Array.isArray(relationData) ? relationData : [];
     const enumOption = field.enumOption;
     if (!enumOption) {
       throw new Error(

src/ReportSnapshots.tsx

@@ -15,6 +15,7 @@ import {
   DialogContentText,
   DialogActions,
   Chip,
+  TextField,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
@@ -131,28 +132,30 @@ export default function ReportSnapshots() {
             />
           )}
 
-          <Box sx={{ display: "flex", gap: 2 }}>
+            <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.datetime && (
               <Box sx={{ flex: 1 }}>
-                <components.datetime
+                <TextField
-                  name="start_date"
+                  label="Start Date"
-                  field={startDateField}
+                  type="date"
                   value={startDate}
-                  onChange={(val: string) => setStartDate(val)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setStartDate(e.target.value)}
+                  size="small"
+                  InputLabelProps={{ shrink: true }}
+                  inputProps={{ max: new Date().toISOString().split("T")[0] }}
                 />
               </Box>
-            )}
-            {endDateField && components?.datetime && (
               <Box sx={{ flex: 1 }}>
-                <components.datetime
+                <TextField
-                  name="end_date"
+                  label="End Date"
-                  field={endDateField}
+                  type="date"
                   value={endDate}
-                  onChange={(val: string) => setEndDate(val)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEndDate(e.target.value)}
+                  size="small"
+                  InputLabelProps={{ shrink: true }}
+                  inputProps={{ max: new Date().toISOString().split("T")[0] }}
                 />
               </Box>
-            )}
+            </Box>
-          </Box>
 
           <Box sx={{ display: "flex", gap: 2 }}>
             {minAmountField && components?.FormField && (