|
1 | 1 | import { useState, useMemo } from "react" |
2 | 2 | import type { FieldProps, RJSFSchema, TemplatesType } from "@rjsf/utils" |
| 3 | +import { RJSF_ID_SEPARATOR } from "../lib/rjsf-ids.ts" |
3 | 4 | import Form from "@rjsf/core" |
4 | 5 | import validator from "@rjsf/validator-ajv8" |
5 | 6 | import { customTemplates, customWidgets } from "./rjsf-templates.tsx" |
6 | 7 | import { addDynamicOptionWidgets } from "../lib/dynamic-options.ts" |
7 | 8 |
|
8 | 9 | export function AdditionalPropertiesField(props: FieldProps) { |
9 | | - const { schema, formData, onChange, readonly, disabled, name, required } = props |
| 10 | + const { schema, formData, onChange, readonly, disabled, name, required, idSchema } = |
| 11 | + props |
10 | 12 | const [newKey, setNewKey] = useState("") |
11 | 13 |
|
12 | 14 | // Get the schema for items from additionalProperties |
@@ -87,6 +89,12 @@ export function AdditionalPropertiesField(props: FieldProps) { |
87 | 89 | <div className="rounded-md bg-white p-3"> |
88 | 90 | <Form |
89 | 91 | tagName="div" |
| 92 | + // Continue the outer form's id namespace into this entry. |
| 93 | + // Without it the nested form restarts at "root", so a map |
| 94 | + // entry's field renders as root_<field> while its validation |
| 95 | + // error names <outer>.<key>.<field>, and nothing resolves it. |
| 96 | + idPrefix={`${idSchema.$id}${RJSF_ID_SEPARATOR}${key}`} |
| 97 | + idSeparator={RJSF_ID_SEPARATOR} |
90 | 98 | schema={itemSchema} |
91 | 99 | uiSchema={itemUiSchema} |
92 | 100 | formData={formData[key]} |
|
0 commit comments