Fix rjsf-team#1314 event in onAddClick is no longer mandatory - with test (rjsf-team#1730)

* Fix rjsf-team#1314 event in onAddClick is no longer mandatory

* Fix optional field syntax in docs

Co-Authored-By: Ashwin Ramaswami <[email protected]>

* Update TypeScript types

* Checks only for element existence in test

* Remove useless attribute in test custom component

Co-authored-by: Mauro Parolari <[email protected]>
Co-authored-by: Ashwin Ramaswami <[email protected]>

Author: 3 people

docs/advanced-customization.md

@@ -120,7 +120,7 @@ The following props are passed to each `ArrayFieldTemplate`:
 - `disabled`: A boolean value stating if the array is disabled.
 - `idSchema`: Object
 - `items`: An array of objects representing the items in the array. Each of the items represent a child with properties described below.
-- `onAddClick: (event) => void`: A function that adds a new item to the array.
+- `onAddClick: (event?) => void`: A function that adds a new item to the array. `event` is optional.
 - `readonly`: A boolean value stating if the array is read-only.
 - `required`: A boolean value stating if the array is required.
 - `schema`: The schema object for this array.

packages/core/index.d.ts

@@ -181,7 +181,7 @@ declare module '@rjsf/core' {
             readonly: boolean;
             key: string;
         }[];
-        onAddClick: (event: any) => (event: any) => void;
+        onAddClick: (event?: any) => void;
         readonly: boolean;
         required: boolean;
         schema: JSONSchema7;
@@ -270,107 +270,107 @@ declare module '@rjsf/core' {
     export module utils {
 
         export const ADDITIONAL_PROPERTY_FLAG: string;
-    
+
         export function getDefaultRegistry(): FieldProps['registry'];
-    
+
         export function getSchemaType(schema: JSONSchema7): string;
-    
+
         export function getWidget(
             schema: JSONSchema7,
             widget: Widget,
             registeredWidgets?: { [name: string]: Widget },
         ): Widget | Error;
-    
+
         export function hasWidget(
             schema: JSONSchema7,
             widget: Widget,
             registeredWidgets?: { [name: string]: Widget },
         ): boolean;
-    
+
         export function computeDefaults<T = any>(
             schema: JSONSchema7,
             parentDefaults: JSONSchema7['default'][],
             definitions: FieldProps['registry']['definitions'],
             rawFormData?: T,
             includeUndefinedValues?: boolean,
         ): JSONSchema7['default'][];
-    
+
         export function getDefaultFormState<T = any>(
             schema: JSONSchema7,
             formData: T,
             definitions?: FieldProps['registry']['definitions'],
             includeUndefinedValues?: boolean,
         ): T | JSONSchema7['default'][];
-    
+
         export function getUiOptions(uiSchema: UiSchema): UiSchema['ui:options'];
-    
+
         export function isObject(thing: any): boolean;
-    
+
         export function mergeObjects(obj1: object, obj2: object, concatArrays?: boolean): object;
-    
+
         export function asNumber(value: string | null): number | string | undefined | null;
-    
+
         export function orderProperties(properties: [], order: []): [];
-    
+
         export function isConstant(schema: JSONSchema7): boolean;
-    
+
         export function toConstant(schema: JSONSchema7): JSONSchema7Type | JSONSchema7['const'] | Error;
-    
+
         export function isSelect(_schema: JSONSchema7, definitions?: FieldProps['registry']['definitions']): boolean;
-    
+
         export function isMultiSelect(schema: JSONSchema7, definitions?: FieldProps['registry']['definitions']): boolean;
-    
+
         export function isFilesArray(
             schema: JSONSchema7,
             uiSchema: UiSchema,
             definitions?: FieldProps['registry']['definitions'],
         ): boolean;
-    
+
         export function isFixedItems(schema: JSONSchema7): boolean;
-    
+
         export function allowAdditionalItems(schema: JSONSchema7): boolean;
-    
+
         export function optionsList(schema: JSONSchema7): { label: string; value: string }[];
-    
+
         export function guessType(value: any): JSONSchema7TypeName;
-    
+
         export function stubExistingAdditionalProperties<T = any>(
             schema: JSONSchema7,
             definitions?: FieldProps['registry']['definitions'],
             formData?: T,
         ): JSONSchema7;
-    
+
         export function resolveSchema<T = any>(
             schema: JSONSchema7Definition,
             definitions?: FieldProps['registry']['definitions'],
             formData?: T,
         ): JSONSchema7;
-    
+
         export function retrieveSchema<T = any>(
             schema: JSONSchema7Definition,
             definitions?: FieldProps['registry']['definitions'],
             formData?: T,
         ): JSONSchema7;
-    
+
         export function deepEquals<T>(a: T, b: T): boolean;
-    
+
         export function shouldRender(comp: React.Component, nextProps: any, nextState: any): boolean;
-    
+
         export function toIdSchema<T = any>(
             schema: JSONSchema7Definition,
             id: string,
             definitions: FieldProps['registry']['definitions'],
             formData?: T,
             idPredix?: string,
         ): IdSchema | IdSchema[];
-    
+
         export function toPathSchema<T = any>(
             schema: JSONSchema7Definition,
             name: string | undefined,
             definitions: FieldProps['registry']['definitions'],
             formData?: T,
         ): PathSchema | PathSchema[];
-    
+
         export interface DateObject {
             year: number;
             month: number;
@@ -379,25 +379,25 @@ declare module '@rjsf/core' {
             minute: number;
             second: number;
         }
-    
+
         export function parseDateString(dateString: string, includeTime?: boolean): DateObject;
-    
+
         export function toDateString(dateObject: DateObject, time?: boolean): string;
-    
+
         export function pad(num: number, size: number): string;
-    
+
         export function setState(instance: React.Component, state: any, callback: Function): void;
-    
+
         export function dataURItoBlob(dataURI: string): { name: string; blob: Blob };
-    
+
         export interface IRangeSpec {
             min?: number;
             max?: number;
             step?: number;
         }
-    
+
         export function rangeSpec(schema: JSONSchema7): IRangeSpec;
-    
+
         export function getMatchingOption(
             formData: any,
             options: JSONSchema7[],
@@ -430,4 +430,4 @@ declare module '@rjsf/core/lib/validate' {
         additionalMetaSchemas?: FormProps<T>['additionalMetaSchemas'],
         customFormats?: FormProps<T>['customFormats'],
     ): { errors: AjvError[]; errorSchema: ErrorSchema };
-}
+}

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

@@ -281,7 +281,9 @@ class ArrayField extends Component {
   };
 
   onAddClick = event => {
-    event.preventDefault();
+    if (event) {
+      event.preventDefault();
+    }
 
     const { onChange } = this.props;
     const newKeyedFormDataRow = {

packages/core/test/ArrayField_test.js

@@ -62,6 +62,27 @@ const ExposedArrayKeyTemplate = function(props) {
   );
 };
 
+const CustomOnAddClickTemplate = function(props) {
+  return (
+    <div className="array">
+      {props.items &&
+        props.items.map(element => (
+          <div key={element.key} className="array-item">
+            <div>{element.children}</div>
+          </div>
+        ))}
+
+      {props.canAdd && (
+        <div className="array-item-add">
+          <button onClick={() => props.onAddClick()} type="button">
+            Add New
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
 describe("ArrayField", () => {
   let sandbox;
   const CustomComponent = props => {
@@ -249,6 +270,17 @@ describe("ArrayField", () => {
         .to.be.true;
     });
 
+    it("should add a field when clicking add button even if event is not passed to onAddClick", () => {
+      const { node } = createFormComponent({
+        schema,
+        ArrayFieldTemplate: CustomOnAddClickTemplate,
+      });
+
+      Simulate.click(node.querySelector(".array-item-add button"));
+
+      expect(node.querySelector(".array-item")).not.to.be.null;
+    });
+
     it("should not provide an add button if length equals maxItems", () => {
       const { node } = createFormComponent({
         schema: { maxItems: 2, ...schema },