fix: #3131 ArrayField fallback to SchemaField (#3136)

* fix: #3131 ArrayField fallback to SchemaField
- Updated `ArrayField` to fallback to `SchemaField` when `ArraySchemaField` was not defined in fields
  - Updated the test to show that the `SchemaField` fallback is working
- Updated the `fields/index.ts` to remove the definition of `ArraySchemaField` and replace it with a comment
- Updated the `custom-widgets-fields.md` file to clarify the `ArraySchemaField` docs based on this improvement
- Updated the `CHANGELOG.md` accordingly

* - Responded to reviewer feedback

CHANGELOG.md

@@ -34,6 +34,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Implemented programmatic validation via new `validateForm()` method on `Form`, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2755, https://github.com/rjsf-team/react-jsonschema-form/issues/2552, https://github.com/rjsf-team/react-jsonschema-form/issues/2381, https://github.com/rjsf-team/react-jsonschema-form/issues/2343, https://github.com/rjsf-team/react-jsonschema-form/issues/1006, https://github.com/rjsf-team/react-jsonschema-form/issues/246)
 - Renamed `WithThemeProps` to `ThemeProps` to prevent another breaking-change by returning the type back to the name it had in version 4
 - Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
+- Updated `ArrayField` to fall back to `SchemaField` if `ArraySchemaField` is not defined, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3131)
 
 ## @rjsf/fluent-ui
 - Updated `Theme` to use the renamed `ThemeProps` from `@rjsf/core`
@@ -62,6 +63,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Fixed the `chakra-ui` custom `uiSchema` documentation to make it clear they work on a per-field basis, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2865)
 - Added `formElement` breaking-change documentation to the `5.x upgrade guide.md`
 - Replace Webpack with Vite
+- Updated documentation for `ArraySchemaField` to better represent the updated implementation, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3131)
 
 # 5.0.0-beta.8
 

docs/advanced-customization/custom-widgets-fields.md

@@ -356,8 +356,8 @@ Props passed to a custom SchemaField are the same as [the ones passed to a custo
 ### Custom ArraySchemaField
 
 Everything that was mentioned above for a `Custom SchemaField` applies, but this is only used to render the Array item `children` that are then passed to the `ArrayFieldItemTemplate`.
-By default, `ArraySchemaField` uses the main `SchemaField` implementation.
-If you want to customize how the individual items for an array are rendered, override the `ArraySchemaField`.
+By default, `ArraySchemaField` is not actually implemented in the `fields` list since `ArrayField` falls back to `SchemaField` if `ArraySchemaField` is not provided.
+If you want to customize how the individual items for an array are rendered, provide your implementation of `ArraySchemaField` as a `fields` override.
 
 ```jsx
 import validator from '@rjsf/validator-ajv6';

packages/core/src/components/fields/ArrayField.tsx

@@ -805,8 +805,9 @@ class ArrayField<T = any, F = any> extends Component<
       formContext,
     } = this.props;
     const {
-      fields: { ArraySchemaField },
+      fields: { ArraySchemaField, SchemaField },
     } = registry;
+    const ItemSchemaField = ArraySchemaField || SchemaField;
     const { orderable = true, removable = true } = getUiOptions<T[], F>(
       uiSchema
     );
@@ -820,7 +821,7 @@ class ArrayField<T = any, F = any> extends Component<
 
     return {
       children: (
-        <ArraySchemaField
+        <ItemSchemaField
           name={name}
           index={index}
           schema={itemSchema}

packages/core/src/components/fields/index.ts

@@ -12,7 +12,7 @@ import NullField from "./NullField";
 const fields: RegistryFieldsType = {
   AnyOfField: MultiSchemaField,
   ArrayField,
-  ArraySchemaField: SchemaField,
+  // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
   BooleanField,
   NumberField,
   ObjectField,

packages/core/test/ArrayField_test.js

@@ -2192,7 +2192,7 @@ describe("ArrayField", () => {
         },
       ],
     };
-    it("should pass form context to schema field for the root", () => {
+    it("should pass form context to schema field for the root AND array schema fields", () => {
       const formContext = {
         root: "root-id",
         root_0: "root_0-id",
@@ -2214,13 +2214,9 @@ describe("ArrayField", () => {
       });
 
       const codeBlocks = node.querySelectorAll("code");
-      expect(codeBlocks).to.have.length(1);
+      expect(codeBlocks).to.have.length(3);
       Object.keys(formContext).forEach((key) => {
-        if (key === "root") {
-          expect(node.querySelector(`code#${formContext[key]}`)).to.exist;
-        } else {
-          expect(node.querySelector(`code#${formContext[key]}`)).to.not.exist;
-        }
+        expect(node.querySelector(`code#${formContext[key]}`)).to.exist;
       });
     });
     it("should pass form context to array schema field only", () => {