diff --git a/CHANGELOG.md b/CHANGELOG.md index f060cb5040..46c239b9f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,11 +17,17 @@ should change the heading of the (upcoming) version to include a major version b --> # v5.0.0 (coming soon) -# v4.0.2 (upcoming) +# v4.0.3 (upcoming) + +# v4.0.2 ## @rjsf/core - To improve performance, skip validating subschemas in oneOf / anyOf if formData is undefined (#2676) +- Fixed the `toIdSchema()` typescript definition to add new `idSeparator` prop along with the spelling of `idPrefix` + - Also passed the new `idSeparator` prop through to the `AnyOfField` and `OneOfField` inside of `SchemaField` + - Updated `ArrayField` in `@rjsf/core` to pass `idSeparator` and `idPrefix` through to `SchemaField`, fixing a small bug + - # v4.0.1 diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts index a9ded9899e..077fd77baf 100644 --- a/packages/core/index.d.ts +++ b/packages/core/index.d.ts @@ -399,7 +399,8 @@ declare module '@rjsf/core' { id: string, definitions: Registry['definitions'], formData?: T, - idPredix?: string, + idPrefix?: string, + idSeparator?: string, ): IdSchema | IdSchema[]; export function toPathSchema( diff --git a/packages/core/src/components/fields/ArrayField.js b/packages/core/src/components/fields/ArrayField.js index c819cd5017..9bcb7c3d91 100644 --- a/packages/core/src/components/fields/ArrayField.js +++ b/packages/core/src/components/fields/ArrayField.js @@ -819,6 +819,8 @@ class ArrayField extends Component { uiSchema={itemUiSchema} formData={itemData} errorSchema={itemErrorSchema} + idPrefix={this.props.idPrefix} + idSeparator={this.props.idSeparator} idSchema={itemIdSchema} required={this.isItemRequired(itemSchema)} onChange={this.onChangeForIndex(index)} diff --git a/packages/core/src/components/fields/SchemaField.js b/packages/core/src/components/fields/SchemaField.js index 711a6c23e4..e3a8f3b1a5 100644 --- a/packages/core/src/components/fields/SchemaField.js +++ b/packages/core/src/components/fields/SchemaField.js @@ -368,6 +368,7 @@ function SchemaFieldRender(props) { formData={formData} idPrefix={idPrefix} idSchema={idSchema} + idSeparator={idSeparator} onBlur={props.onBlur} onChange={props.onChange} onFocus={props.onFocus} @@ -388,6 +389,7 @@ function SchemaFieldRender(props) { formData={formData} idPrefix={idPrefix} idSchema={idSchema} + idSeparator={idSeparator} onBlur={props.onBlur} onChange={props.onChange} onFocus={props.onFocus} diff --git a/packages/core/test/ArrayField_test.js b/packages/core/test/ArrayField_test.js index 7435f51cea..c584bd1a0b 100644 --- a/packages/core/test/ArrayField_test.js +++ b/packages/core/test/ArrayField_test.js @@ -1909,4 +1909,38 @@ describe("ArrayField", () => { expect(node.querySelector("#title-")).to.be.null; }); }); + + describe("should handle nested idPrefix and idSeparator parameter", () => { + it("should render nested input widgets with the expected ids", () => { + const complexSchema = { + type: "object", + properties: { + foo: { + type: "array", + items: { + type: "object", + properties: { + bar: { type: "string" }, + baz: { type: "string" }, + }, + }, + }, + }, + }; + const { node } = createFormComponent({ + schema: complexSchema, + formData: { + foo: [{ bar: "bar1", baz: "baz1" }, { bar: "bar2", baz: "baz2" }], + }, + idSeparator: "/", + idPrefix: "base", + }); + + const inputs = node.querySelectorAll("input[type=text]"); + expect(inputs[0].id).eql("base/foo_0/bar"); + expect(inputs[1].id).eql("base/foo_0/baz"); + expect(inputs[2].id).eql("base/foo_1/bar"); + expect(inputs[3].id).eql("base/foo_1/baz"); + }); + }); });