fix: Update control input IDs on schema change (#2307)

This commit updates the IDs of all controls if the schema prop handed over to JSON Forms changes. closes #2213
eclipsesource · Apr 16, 2024 · c0549f2 · c0549f2
1 parent 0ee8bf2
commit c0549f2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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<R, D, P extends {}>(
     }
   });
 
+  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);