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,6 +16,7 @@ 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]) =>
+          React.cloneElement(
             renderField({
               name: `${name}.${subKey}`,
               field: subField,
@@ -28,8 +30,12 @@ export default function ObjectField({ name, field, value, onChange, disabled, ba
               uploadFile,
               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";
@@ -132,26 +133,28 @@ export default function ReportSnapshots() {
           )}
 
             <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.datetime && (
               <Box sx={{ flex: 1 }}>
-                <components.datetime
-                  name="start_date"
-                  field={startDateField}
+                <TextField
+                  label="Start Date"
+                  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
-                  name="end_date"
-                  field={endDateField}
+                <TextField
+                  label="End Date"
+                  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 sx={{ display: "flex", gap: 2 }}>