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.
186a1ba086