Fix setup wizard navigation and button interaction issues

Fixed two critical issues in the setup wizard:

1. **Missing onUpdate callback**:
   - Added onUpdate prop to SetupStepProps interface
   - Created handleStepUpdate callback in SetupWizard to receive canContinue updates
   - Passed onUpdate to all step components
   - Added onUpdate implementation in SuppliersSetupStep (was missing)
   - This fixes the issue where Continue/Skip buttons were incorrectly disabled for optional steps

2. **Button interaction issues in QualitySetupStep**:
   - Added explicit e.preventDefault() and e.stopPropagation() to Check Type buttons
   - Added explicit e.preventDefault() and e.stopPropagation() to Applicable Stages buttons
   - Added cursor-pointer class for better UX
   - This fixes the issue where buttons weren't responding to clicks

The Quality Setup and Suppliers Setup steps now properly:
- Show enabled Continue button when requirements are met
- Show Skip button for optional steps
- Allow clicking Check Type and Applicable Stages buttons without form submission interference
This commit is contained in:
Claude
2025-11-06 19:00:57 +00:00
parent 3823225df4
commit 5670601fbe
3 changed files with 30 additions and 4 deletions

View File

@@ -262,8 +262,12 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
<button
key={option.value}
type="button"
onClick={() => setFormData({ ...formData, check_type: option.value })}
className={`p-3 text-left border rounded-lg transition-colors ${
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setFormData({ ...formData, check_type: option.value });
}}
className={`p-3 text-left border rounded-lg transition-colors cursor-pointer ${
formData.check_type === option.value
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
: 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]'
@@ -302,8 +306,12 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
<button
key={option.value}
type="button"
onClick={() => toggleStage(option.value)}
className={`p-2 text-sm text-left border rounded-lg transition-colors ${
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
toggleStage(option.value);
}}
className={`p-2 text-sm text-left border rounded-lg transition-colors cursor-pointer ${
formData.applicable_stages.includes(option.value)
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)]'
: 'border-[var(--border-secondary)] text-[var(--text-secondary)] hover:border-[var(--border-primary)]'