Stop infinite renders caused by circular $ref object properties

CHANGELOG.md

@@ -16,6 +16,65 @@ should change the heading of the (upcoming) version to include a major version b
 
 -->
 
+# 6.7.0
+
+## @rjsf/antd
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/chakra-ui
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/core
+
+- Fixed [#3907](https://github.com/rjsf-team/react-jsonschema-form/issues/3907) and [#4262](https://github.com/rjsf-team/react-jsonschema-form/issues/4262) as follows:
+  - Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+  - Added `CyclicSchemaField` to the list of fields, that renders the `CyclicSchemaExpandTemplate` initially and, if expanded, will render the `SchemaField` with the `RJSF_REF_CYCLE_KEY` tag turned off  
+  - Updated `SchemaForm` to render the `CyclicSchemaField` when the schema contains the `RJSF_REF_CYCLE_KEY` set to `true`
+
+## @rjsf/daisyui
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/fluentui-rc
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/mantine
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/mui
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/primereact
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/react-bootstrap
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/semantic-ui
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/shadcn
+
+- Added `CyclicSchemaExpandTemplate` to the list of templates for the theme, updating snapshots accordingly
+
+## @rjsf/utils
+
+- Updated `types.ts` to add `CyclicSchemaExpandProps` type and `CyclicSchemaExpandTemplate` in the `TemplatesType`
+- Updated `resolveAllReferences()` to add a new `markCycleOnDetection` prop which adds `RJSF_REF_CYCLE_KEY` marker (from `constants.ts`) to a schema that has been detected to have a cycle, partially fixing [#3907](https://github.com/rjsf-team/react-jsonschema-form/issues/3907)
+- Updated `hashForSchema()` to filter keys to remove `RJSF_REF_KEY` prefixed keys before hashing the schema
+- Updated `enums.ts` to add `ExpandButton` and `CycleDetected` keys
+
+## Dev / docs / playground
+
+- Updated `@rjsf/snapshots` to add a test case to `formTests` that verifies the new Cycle detection UI
 # 6.6.2
 
 ## @rjsf/core

packages/antd/src/templates/CyclicSchemaExpandTemplate/index.tsx

@@ -0,0 +1,38 @@
+import type { CyclicSchemaExpandProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ID_KEY, TranslatableString } from '@rjsf/utils';
+import { Alert, Button, Space, version } from 'antd';
+
+const antdMajor = parseInt(version.split('.')[0], 10);
+
+/** The `CyclicSchemaExpandTemplate` is the template to use to render the cyclic schema expand message and controls
+ *
+ * @param props - The `CyclicSchemaExpandProps` for this component
+ */
+export default function CyclicSchemaExpandTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: CyclicSchemaExpandProps<T, S, F>) {
+  const { name, fieldPathId, registry, onExpand } = props;
+  const { translateString } = registry;
+  const buttonId = `${fieldPathId[ID_KEY]}-button`;
+
+  const headerProp =
+    antdMajor >= 6
+      ? { title: translateString(TranslatableString.CycleDetected, [name]) }
+      : { message: translateString(TranslatableString.CycleDetected, [name]) };
+
+  return (
+    <Alert
+      type='warning'
+      {...headerProp}
+      action={
+        <Space>
+          <Button id={buttonId} size='small' type='default' onClick={() => onExpand(fieldPathId[ID_KEY])}>
+            {translateString(TranslatableString.ExpandButton)}
+          </Button>
+        </Space>
+      }
+    />
+  );
+}

packages/antd/src/templates/index.ts

@@ -3,6 +3,7 @@ import type { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } fro
 import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import BaseInputTemplate from './BaseInputTemplate';
+import CyclicSchemaExpandTemplate from './CyclicSchemaExpandTemplate';
 import ErrorList from './ErrorList';
 import DescriptionField from './FieldDescriptionTemplate';
 import FieldErrorTemplate from './FieldErrorTemplate';
@@ -25,6 +26,7 @@ export function generateTemplates<
     ArrayFieldItemTemplate,
     ArrayFieldTemplate,
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     ButtonTemplates: {
       AddButton,
       CopyButton,

packages/antd/test/__snapshots__/Form.test.tsx.snap

@@ -4545,6 +4545,195 @@ exports[`nameGenerator > dotNotationNameGenerator > simple fields 1`] = `
 </DocumentFragment>
 `;
 
+exports[`single fields > Cyclic schema 1`] = `
+<DocumentFragment>
+  <form
+    class="rjsf"
+  >
+    <div
+      class="rjsf-field rjsf-field-object"
+    >
+      <div
+        class="ant-form-item css-var-root ant-form-css-var css-dev-only-do-not-override-ypkju9 ant-form-item-horizontal"
+      >
+        <div
+          class="ant-row ant-form-item-row css-dev-only-do-not-override-ypkju9 css-var-root"
+        >
+          <div
+            class="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ypkju9 css-var-root"
+          >
+            <div
+              class="ant-form-item-control-input"
+            >
+              <div
+                class="ant-form-item-control-input-content"
+              >
+                <fieldset
+                  id="root"
+                >
+                  <div
+                    class="ant-row css-dev-only-do-not-override-ypkju9 css-var-root"
+                    style="margin-inline: -12px;"
+                  >
+                    <div
+                      class="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ypkju9 css-var-root"
+                      style="padding-inline: 12px;"
+                    >
+                      <label
+                        class=""
+                        for="root__title"
+                        title="A registration form"
+                      >
+                        A registration form
+                      </label>
+                      <div
+                        class="ant-divider css-dev-only-do-not-override-ypkju9 css-var-root ant-divider-horizontal ant-divider-sm ant-divider-rail"
+                        role="separator"
+                        style="margin-block: 1px;"
+                      />
+                    </div>
+                    <div
+                      class="ant-col ant-col-24 css-dev-only-do-not-override-ypkju9 css-var-root"
+                      style="padding-inline: 12px;"
+                    >
+                      <div
+                        class="rjsf-field rjsf-field-object"
+                      >
+                        <div
+                          class="ant-form-item css-var-root ant-form-css-var css-dev-only-do-not-override-ypkju9 ant-form-item-horizontal"
+                        >
+                          <div
+                            class="ant-row ant-form-item-row css-dev-only-do-not-override-ypkju9 css-var-root"
+                          >
+                            <div
+                              class="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ypkju9 css-var-root"
+                            >
+                              <div
+                                class="ant-form-item-control-input"
+                              >
+                                <div
+                                  class="ant-form-item-control-input-content"
+                                >
+                                  <fieldset
+                                    id="root_child"
+                                  >
+                                    <div
+                                      class="ant-row css-dev-only-do-not-override-ypkju9 css-var-root"
+                                      style="margin-inline: -12px;"
+                                    >
+                                      <div
+                                        class="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ypkju9 css-var-root"
+                                        style="padding-inline: 12px;"
+                                      >
+                                        <label
+                                          class=""
+                                          for="root_child__title"
+                                          title="A registration form"
+                                        >
+                                          A registration form
+                                        </label>
+                                        <div
+                                          class="ant-divider css-dev-only-do-not-override-ypkju9 css-var-root ant-divider-horizontal ant-divider-sm ant-divider-rail"
+                                          role="separator"
+                                          style="margin-block: 1px;"
+                                        />
+                                      </div>
+                                      <div
+                                        class="ant-col ant-col-24 css-dev-only-do-not-override-ypkju9 css-var-root"
+                                        style="padding-inline: 12px;"
+                                      >
+                                        <div
+                                          class="ant-alert ant-alert-warning ant-alert-outlined ant-alert-no-icon css-var-root css-dev-only-do-not-override-ypkju9"
+                                          data-show="true"
+                                          role="alert"
+                                        >
+                                          <div
+                                            class="ant-alert-section"
+                                          >
+                                            <div
+                                              class="ant-alert-title"
+                                            >
+                                              Circular reference ($ref cycle) detected for field "child". You may choose to expand to the next cycle break
+                                            </div>
+                                          </div>
+                                          <div
+                                            class="ant-alert-actions"
+                                          >
+                                            <div
+                                              class="ant-space css-dev-only-do-not-override-ypkju9 ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-root"
+                                            >
+                                              <div
+                                                class="ant-space-item"
+                                              >
+                                                <button
+                                                  class="ant-btn css-dev-only-do-not-override-ypkju9 css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm"
+                                                  id="root_child_child-button"
+                                                  type="button"
+                                                >
+                                                  <span>
+                                                    Expand Cycle
+                                                  </span>
+                                                </button>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </fieldset>
+                                </div>
+                              </div>
+                              <div
+                                class="ant-form-item-additional"
+                              >
+                                <div
+                                  class="ant-form-item-extra"
+                                >
+                                  <span
+                                    id="root_child__description"
+                                  >
+                                    A simple form example.
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+            </div>
+            <div
+              class="ant-form-item-additional"
+            >
+              <div
+                class="ant-form-item-extra"
+              >
+                <span
+                  id="root__description"
+                >
+                  A simple form example.
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button
+      class="ant-btn css-dev-only-do-not-override-ypkju9 css-var-root ant-btn-submit"
+      type="submit"
+    >
+      <span>
+        Submit
+      </span>
+    </button>
+  </form>
+</DocumentFragment>
+`;
+
 exports[`single fields > checkbox field 1`] = `
 <DocumentFragment>
   <form

packages/chakra-ui/src/CyclicSchemaExpandTemplate/CyclicSchemaExpandTemplate.tsx

@@ -0,0 +1,27 @@
+import { Box, Button } from '@chakra-ui/react';
+import type { CyclicSchemaExpandProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ID_KEY, TranslatableString } from '@rjsf/utils';
+
+import { Alert } from '../components/ui/alert';
+
+/** The `CyclicSchemaExpandTemplate` is the template to use to render the cyclic schema expand message and controls
+ *
+ * @param props - The `CyclicSchemaExpandProps` for this component
+ */
+export default function CyclicSchemaExpandTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: CyclicSchemaExpandProps<T, S, F>) {
+  const { name, fieldPathId, registry, onExpand } = props;
+  const { translateString } = registry;
+  const buttonId = `${fieldPathId[ID_KEY]}-button`;
+  return (
+    <Box mt={4}>
+      <Alert status='warning' title={translateString(TranslatableString.CycleDetected, [name])} mb={2} />
+      <Button id={buttonId} size='sm' variant='outline' onClick={() => onExpand(fieldPathId[ID_KEY])}>
+        {translateString(TranslatableString.ExpandButton)}
+      </Button>
+    </Box>
+  );
+}

packages/chakra-ui/src/CyclicSchemaExpandTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CyclicSchemaExpandTemplate';
+export * from './CyclicSchemaExpandTemplate';

packages/chakra-ui/src/Templates/Templates.ts

@@ -4,6 +4,7 @@ import AddButton from '../AddButton';
 import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';
 import ArrayFieldTemplate from '../ArrayFieldTemplate';
 import BaseInputTemplate from '../BaseInputTemplate/BaseInputTemplate';
+import CyclicSchemaExpandTemplate from '../CyclicSchemaExpandTemplate';
 import DescriptionField from '../DescriptionField';
 import ErrorList from '../ErrorList';
 import FieldErrorTemplate from '../FieldErrorTemplate';
@@ -27,6 +28,7 @@ export function generateTemplates<
     ArrayFieldItemTemplate,
     ArrayFieldTemplate,
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     ButtonTemplates: {
       CopyButton,
       AddButton,