Merge pull request #20739 from backstage/blam/scaffolder-gix

[scaffolder] Fix form re-rendering

plugins/scaffolder-react/src/next/components/Form/Form.tsx

@@ -32,27 +32,34 @@ const WrappedForm = withTheme(MuiTheme);
 export const Form = (props: PropsWithChildren<ScaffolderRJSFFormProps>) => {
   // This is where we unbreak the changes from RJSF, and make it work with our custom fields so we don't pass on this
   // breaking change to our users. We will look more into a better API for this in scaffolderv2.
-  const wrappedFields = Object.fromEntries(
-    Object.entries(props.fields ?? {}).map(([key, Component]) => [
-      key,
-      (wrapperProps: FieldProps) => {
-        return (
-          <Component
-            {...wrapperProps}
-            uiSchema={wrapperProps.uiSchema ?? {}}
-            formData={wrapperProps.formData}
-            rawErrors={wrapperProps.rawErrors ?? []}
-          />
-        );
-      },
-    ]),
+  const wrappedFields = React.useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(props.fields ?? {}).map(([key, Component]) => [
+          key,
+          (wrapperProps: FieldProps) => {
+            return (
+              <Component
+                {...wrapperProps}
+                uiSchema={wrapperProps.uiSchema ?? {}}
+                formData={wrapperProps.formData}
+                rawErrors={wrapperProps.rawErrors ?? []}
+              />
+            );
+          },
+        ]),
+      ),
+    [props.fields],
   );
 
-  const templates = {
-    FieldTemplate,
-    DescriptionFieldTemplate,
-    ...props.templates,
-  };
+  const templates = React.useMemo(
+    () => ({
+      FieldTemplate,
+      DescriptionFieldTemplate,
+      ...props.templates,
+    }),
+    [props.templates],
+  );
 
   return (
     <WrappedForm {...props} templates={templates} fields={wrappedFields} />

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -115,6 +115,11 @@ export const Stepper = (stepperProps: StepperProps) => {
     );
   }, [props.extensions]);
 
+  const fields = useMemo(
+    () => ({ ...FieldOverrides, ...extensions }),
+    [extensions],
+  );
+
   const validators = useMemo(() => {
     return Object.fromEntries(
       props.extensions.map(({ name, validation }) => [name, validation]),
@@ -197,7 +202,7 @@ export const Stepper = (stepperProps: StepperProps) => {
             schema={currentStep.schema}
             uiSchema={currentStep.uiSchema}
             onSubmit={handleNext}
-            fields={{ ...FieldOverrides, ...extensions }}
+            fields={fields}
             showErrorList={false}
             onChange={handleChange}
             {...(props.formProps ?? {})}