fix: 🐛 Fixes potential circular object

package.json

@@ -65,6 +65,7 @@
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "axios-mock-adapter": "^1.22.0",
+    "circular-json": "^0.5.9",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57",

src/Form/index.tsx

@@ -67,7 +67,7 @@ const Form = <TForm extends NestedObject>({
 	 * otherwise submits using Inertia's `useForm.submit` method
 	 */
 	const submit = async (options?: Partial<VisitOptions>) => {
-		let shouldSubmit = to && onSubmit && onSubmit(contextValueObject()) === false ? false : true
+		let shouldSubmit = to && onSubmit?.(contextValueObject()) === false ? false : true
 
 		if(shouldSubmit) {
 			if(async) {

src/Inputs/DynamicInputs.tsx

@@ -21,7 +21,7 @@ const DynamicInputs = ({
 
 	return (
 		<>
-			{ React.cloneElement(addInputButton, { onClick: addInput, type: 'button' }) }
+			{ React.cloneElement(addInputButton, { onClick: ( )=> addInput(), type: 'button' }) }
 			{ paths.map((path, i) => (
 				<NestedFields key={ i } model={ path }>
 					<div>{ children }</div>

src/Inputs/Input.tsx

@@ -30,7 +30,7 @@ const Input = <TForm extends NestedObject, T = string>(
 		defaultValue,
 		clearErrorsOnChange,
 	})
-
+	// console.log({ name, model, errorKey, defaultValue, inputName, inputId, value })
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const value = (e.target?.checked || e.target.value) as T
 		setValue(value)

tests/components/ContextTest.tsx

@@ -1,5 +1,15 @@
 import React, { useEffect } from 'react'
 import { NestedObject, useForm, UseFormProps } from '../../src'
+import CircularJSON from 'circular-json'
+
+const safeStringify = (obj) => {
+	try {
+		return CircularJSON.stringify(obj)
+	} catch(err) {
+		console.error('Error stringifying object:', err)
+		return null
+	}
+}
 
 interface ContextTestProps<T = NestedObject> {
 	cb?: (form: UseFormProps<T>) => void
@@ -15,10 +25,10 @@ const ContextTest = <T = NestedObject>({ cb }: ContextTestProps<T>) => {
 	return (
 		<>
 			<div data-testid="data">
-				{ JSON.stringify(form.data) }
+				{ safeStringify(form.data) }
 			</div>
 			<div data-testid="errors">
-				{ JSON.stringify(form.errors) }
+				{ safeStringify(form.errors) }
 			</div>
 		</>
 	)

tests/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noUnusedLocals": false,
+  },
+}

tests/useDynamicInputs.test.tsx

@@ -6,6 +6,7 @@ import Input from '../src/Inputs/Input'
 import { DynamicInputs, useDynamicInputs } from '../src'
 import { act } from '@testing-library/react-hooks'
 import { multiRootData } from './components/data'
+import ContextTest from './components/ContextTest'
 
 describe('DynamicInputs', () => {
 	describe('With data object passed in', () => {
@@ -91,26 +92,32 @@ describe('DynamicInputs', () => {
 		})
 	})
 
-
-
-
-
-
-
+	/**
+	 * No data prop tests
+	 */
 	describe('With no data object passed in', () => {
 
 		it('renders dynamic input fields', () => {
 			render(
 				<Form to="/form" model="contact" remember={ false }>
-					<DynamicInputs model="phones" emptyData={ { number: '' } }>
+					<DynamicInputs model="phones" emptyData={ { title: '', number: '+1' } }>
+						<Input name="title" />
 						<Input name="number" />
 					</DynamicInputs>
+
+					<ContextTest />
 				</Form>,
 			)
 
 			const buttons = screen.getAllByRole('button')
+			const dataEl = screen.getByTestId('data')
+
+			act(() => {
+				buttons[0].click()
+			})
 
 			expect(buttons.length).toBe(1)
+			expect(dataEl).toHaveTextContent('{"contact":{"phones":[{"title":"","number":"+1"}]}}')
 		})
 
 		it('adds inputs', () => {
@@ -166,17 +173,20 @@ describe('DynamicInputs', () => {
 				return null
 			}
 
-			let phones = form.getData('contact.phones')
-			expect(phones.length).toEqual(3)
+
+			act(() => {
+				inputs.addInput()
+				inputs.addInput()
+			})
+
+			expect(form.getData('contact.phones').length).toEqual(2)
 
 			act(() => {
 				inputs.removeInput(1)
 			})
 
-			phones = form.getData('contact.phones')
+			expect(form.getData('contact.phones').length).toEqual(1)
 
-			expect(phones.length).toEqual(2)
-			expect(phones).not.toContainEqual({ number: '2234567890' })
 		})
 	})
 })

yarn.lock

@@ -3669,6 +3669,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"circular-json@npm:^0.5.9":
+  version: 0.5.9
+  resolution: "circular-json@npm:0.5.9"
+  checksum: a52a8ace55dbffd769cab749e2bce53fbd881f11dfdfe2b015e0770b83f01ca753e3d24f36d2a94ecb2ea840806b5386ef5c587ce533869951b96b79c058540b
+  languageName: node
+  linkType: hard
+
 "cjs-module-lexer@npm:^1.0.0":
   version: 1.3.1
   resolution: "cjs-module-lexer@npm:1.3.1"
@@ -11888,6 +11895,7 @@ __metadata:
     "@typescript-eslint/parser": ^7.8.0
     axios: ^1.6.8
     axios-mock-adapter: ^1.22.0
+    circular-json: ^0.5.9
     commitizen: ^4.3.0
     cz-conventional-changelog: ^3.3.0
     eslint: ^8.57