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:
@@ -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)]'
|
||||
|
||||
Reference in New Issue
Block a user