[samarkumar4355]

Summary

Resolves project board item #86 (imp-addProductFormTSX_focusInput_onTab) and contributes to #112.

Problem

When uploading an image in the Add Product form in the admin panel, pressing Tab while on the upload trigger (dragZone) does not move focus to the first form input (title). Instead, focus lands on intermediate image actions (e.g. "Primary image" or "Remove") in the gallery section, requiring redundant tab presses before reaching the form fields.

Solution

1. ProductInput.tsx:
   • Added externalInputRef?: (element: HTMLInputElement | null) => void callback prop to forward the underlying <input> element reference to callers.
   • Refactored numeric onKeyDown in ProductInput to access e.currentTarget cleanly.
2. AddProductForm.tsx:
   • Created titleInputRef and passed it via externalInputRef to the title field (ProductInput id="title").
   • Added an onKeyDown listener on the upload button (dragZone) so pressing Tab (without Shift) directly transfers focus to titleInputRef.current?.focus().

Validation

• pnpm exec eslint app/components/ui/Modals/AdminPanel/components/AddProductForm.tsx — passed with 0 errors
• pnpm exec eslint app/components/ui/Inputs/Validation/ProductInput.tsx — passed with 0 errors
• pnpm type-check (tsc -p tsconfig.json --noEmit) — passed with 0 errors
• pnpm test:commit-naming — passed (all 6 tests passing)
• pnpm test:eslint-rules — passed (all 24 tests passing)
• Commit and PR title validated with .github/scripts/validate-commit-naming.mjs

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[vercel]

@samarkumar4355 is attempting to deploy a commit to the nicitaacom's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: Repository: nicitaacom/23_store/.coderabbit.yaml
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: c24ae154-da0a-4597-818f-e10f2887e9f2

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}