fix: CRITICAL ROOT CAUSE - Prevent wizard component recreation on every keystroke

ROOT CAUSE ANALYSIS:
The input focus loss bug was caused by the wizard steps being recreated on
EVERY SINGLE RENDER of UnifiedAddWizard, which happened on EVERY KEYSTROKE.

DETAILED PROBLEM FLOW:
1. User types in name field → handleDataChange called
2. handleDataChange calls setWizardData → UnifiedAddWizard re-renders
3. Line 127: steps={getWizardSteps()} called on every render
4. getWizardSteps() calls InventoryWizardSteps(wizardData, setWizardData)
5. Returns NEW array with NEW component function references:
   component: (props) => <InventoryDetailsStep {...props} data={data} onDataChange={setData} />
6. React compares old component ref with new ref, sees they're different
7. React UNMOUNTS old component and MOUNTS new component
8. Input element is DESTROYED and RECREATED → LOSES FOCUS

This happened on EVERY keystroke because:
- wizardData updates on every keystroke
- getWizardSteps() runs on every render
- New component functions created every time
- React sees different function reference = different component type

SOLUTION:
Used useMemo to memoize the wizardSteps array so it's only recreated when
selectedItemType changes, NOT when wizardData changes.

const wizardSteps = useMemo(() => {
  // ... generate steps
}, [selectedItemType, handleItemTypeSelect]);

Now the step component functions maintain the same reference across renders,
so React keeps the same component instance mounted, preserving input focus.

IMPACT:
 Inputs no longer lose focus while typing
 Component state is preserved between keystrokes
 No more unmount/remount cycles on every keystroke
 Dramatically improved performance (no unnecessary component recreation)

This was the TRUE root cause - the previous fixes helped but didn't solve
the fundamental architectural issue of recreating components on every render.
This commit is contained in:
Claude
2025-11-10 10:19:54 +00:00
parent f07e527502
commit 186a1ba086

View File

@@ -1,4 +1,4 @@
import React, { useState, useCallback } from 'react';
import React, { useState, useCallback, useMemo } from 'react';
import { Sparkles } from 'lucide-react';
import { WizardModal, WizardStep } from '../../ui/WizardModal/WizardModal';
import { ItemTypeSelector, ItemType } from './ItemTypeSelector';
@@ -57,7 +57,9 @@ export const UnifiedAddWizard: React.FC<UnifiedAddWizardProps> = ({
);
// Get wizard steps based on selected item type
const getWizardSteps = (): WizardStep[] => {
// CRITICAL: Memoize the steps to prevent component recreation on every render
// Without this, every keystroke causes the component to unmount/remount, losing focus
const wizardSteps = useMemo((): WizardStep[] => {
if (!selectedItemType) {
// Step 0: Item Type Selection
return [
@@ -95,7 +97,7 @@ export const UnifiedAddWizard: React.FC<UnifiedAddWizardProps> = ({
default:
return [];
}
};
}, [selectedItemType, handleItemTypeSelect]); // Only recreate when item type changes, NOT when wizardData changes
// Get wizard title based on selected item type
const getWizardTitle = (): string => {
@@ -124,7 +126,7 @@ export const UnifiedAddWizard: React.FC<UnifiedAddWizardProps> = ({
onClose={handleClose}
onComplete={handleWizardComplete}
title={getWizardTitle()}
steps={getWizardSteps()}
steps={wizardSteps}
icon={<Sparkles className="w-6 h-6" />}
size="xl"
/>