fix(scanner): import useFocusTrap in ScanDisambiguationDialog (#144)

Production runtime ReferenceError on the scan flow:

    ReferenceError: useFocusTrap is not defined
        at ScanDisambiguationDialog (...)

`components/ScanDisambiguationDialog.js` calls `useFocusTrap(...)` on
line 14 but never imports it. The file previously had `import { useRef
} from 'react'` (unused since the focus-trap refactor in PR #67
`071a3dc`); the `useFocusTrap` import was never added when the hook
was introduced. The bug only manifests at runtime when the scan flow
reaches a disambiguation result (i.e. when the OCR/match returns
multiple candidate cards), which is why neither smoke nor visual diff
caught it — the dialog never renders in the homepage smoke path.

Lint also missed it because the project's flat ESLint config does NOT
extend `eslint:recommended` / `@eslint/js`'s `no-undef` rule. The
`react/jsx-no-undef` rule catches undefined JSX components but not
plain JS identifier references. Hardening that gap is the queued
`enable-no-undef-eslint-rule` follow-up — out of scope for this hotfix.

Replaces the dead `useRef` import with the missing `useFocusTrap`
named import from `lib/use-focus-trap.js` (parallel to how
`components/ui/Modal.js` imports `useFocusTrapContainer` as the
default export — see Modal.js:3 + use-focus-trap.js:21 / :87 for the
two-export shape).

Test plan:
- [x] `npm run lint` — clean (1 pre-existing unrelated warning)
- [x] `npm run test:run` — 123 tests pass (24 files)
- [ ] CI on this PR
- [ ] Post-merge: re-trigger a scan that disambiguates (ambiguous OCR
      hit) and confirm the modal renders without console errors.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
varutasu 2026-06-13 01:00:47 -05:00 committed by GitHub
parent 4f6467f077
commit 31da384a9d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,5 +1,5 @@
/* eslint-disable @next/next/no-img-element -- external Scryfall/card CDN URLs */
import { useRef } from 'react';
import { useFocusTrap } from '../lib/use-focus-trap';
/**
* Modal for picking among multiple catalog matches after a scan.