Fix cyclic object error in onboarding step completion
**Issue:**
When clicking Continue button in setup steps (quality, inventory, recipes,
team, review), got error: "cyclic object value"
**Root Cause:**
Button onClick handlers were passing React event object directly to onComplete:
```tsx
onClick={onComplete} // Passes event as first argument
```
React event objects have circular references (target, currentTarget, etc.)
which cannot be JSON.stringify'd for API calls.
**Solution:**
Wrap all onComplete calls in arrow functions to prevent event from being passed:
```tsx
onClick={() => onComplete()} // Calls with no arguments
```
**Files Fixed:**
- QualitySetupStep.tsx:436
- InventorySetupStep.tsx:1014
- RecipesSetupStep.tsx:801
- ReviewSetupStep.tsx:314
- TeamSetupStep.tsx:318
**Error Log (Before Fix):**
```
Completing step: "quality-setup" with data:
Object { _reactName: "onClick", _targetInst: null, type: "click", ...
❌ API error: "cyclic object value"
```
**After Fix:**
✅ onComplete() called with no arguments
✅ No event object passed to API
✅ Step completion works correctly
**Build Status:** ✓ Successful in 22.11s
This commit is contained in:
@@ -1011,7 +1011,7 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
|
||||
{onComplete && (
|
||||
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
|
||||
<button
|
||||
onClick={onComplete}
|
||||
onClick={() => onComplete()}
|
||||
disabled={canContinue === false}
|
||||
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
|
||||
@@ -433,7 +433,7 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
|
||||
{onComplete && (
|
||||
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
|
||||
<button
|
||||
onClick={onComplete}
|
||||
onClick={() => onComplete()}
|
||||
disabled={canContinue === false}
|
||||
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
|
||||
@@ -798,7 +798,7 @@ export const RecipesSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
|
||||
{onComplete && (
|
||||
<div className="flex justify-end mt-6 pt-6 border-[var(--border-secondary)]">
|
||||
<button
|
||||
onClick={onComplete}
|
||||
onClick={() => onComplete()}
|
||||
disabled={canContinue === false}
|
||||
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
|
||||
@@ -311,7 +311,7 @@ export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete
|
||||
{onComplete && (
|
||||
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
|
||||
<button
|
||||
onClick={onComplete}
|
||||
onClick={() => onComplete()}
|
||||
disabled={canContinue === false}
|
||||
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
|
||||
@@ -315,7 +315,7 @@ export const TeamSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete,
|
||||
{onComplete && (
|
||||
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
|
||||
<button
|
||||
onClick={onComplete}
|
||||
onClick={() => onComplete()}
|
||||
disabled={canContinue === false}
|
||||
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user