diff --git a/packages/angular/src/library/abstract-control.ts b/packages/angular/src/library/abstract-control.ts index 1052c21b8..54105e51a 100644 --- a/packages/angular/src/library/abstract-control.ts +++ b/packages/angular/src/library/abstract-control.ts @@ -29,6 +29,7 @@ import { JsonFormsState, JsonSchema, OwnPropsOfControl, + removeId, StatePropsOfControl, } from '@jsonforms/core'; import { Component, Input, OnDestroy, OnInit } from '@angular/core'; @@ -148,6 +149,7 @@ export abstract class JsonFormsAbstractControl< if (this.subscription) { this.subscription.unsubscribe(); } + removeId(this.id); } isEnabled(): boolean { diff --git a/packages/react/src/JsonForms.tsx b/packages/react/src/JsonForms.tsx index 343064d5e..38ed5514d 100644 --- a/packages/react/src/JsonForms.tsx +++ b/packages/react/src/JsonForms.tsx @@ -77,6 +77,17 @@ export class JsonFormsDispatchRenderer extends React.Component< } } + componentDidUpdate(prevProps: JsonFormsProps) { + if (prevProps.schema !== this.props.schema) { + removeId(this.state.id); + this.setState({ + id: isControl(this.props.uischema) + ? createId(this.props.uischema.scope) + : undefined, + }); + } + } + render() { const { schema, diff --git a/packages/vue/src/jsonFormsCompositions.ts b/packages/vue/src/jsonFormsCompositions.ts index a9ffc6b32..976ad436f 100644 --- a/packages/vue/src/jsonFormsCompositions.ts +++ b/packages/vue/src/jsonFormsCompositions.ts @@ -36,6 +36,7 @@ import { mapStateToLabelProps, LabelElement, Categorization, + isControl, } from '@jsonforms/core'; import { PropType, @@ -45,6 +46,7 @@ import { onBeforeMount, onUnmounted, ref, + watch, } from 'vue'; /** @@ -184,6 +186,21 @@ export function useControl( } }); + watch( + () => (props as unknown as RendererProps).schema, + (newSchema, prevSchem) => { + if ( + newSchema !== prevSchem && + isControl((control.value as any).uischema) + ) { + if (id.value) { + removeId(id.value); + } + id.value = createId((control.value as any).uischema.scope); + } + } + ); + onUnmounted(() => { if (id.value) { removeId(id.value);