Fix Enter on the marketplace Buy button opening details instead of buying

Open Beginner friendly
  • Is something wrong?
#57 3 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@developedbyBob is already working on this.

Since Nov 1, 2026.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
next.js, react, typescript
Domain
accessibility, frontend, testing

Research direction

Open frontend/src/components/marketplace/MarketplaceListingCard.tsx and look at the card's onKeyDown around line 50 and the nested Buy button around lines 127-134. Guard the card handler so it returns early when e.target !== e.currentTarget. Then run cd frontend && npx vitest run src/components/marketplace/MarketplaceListingCard.test.tsx and update MarketplaceListingCard.test.tsx to assert Enter/Space on Buy calls neither onSelect nor preventDefault, while the card itself still selects; add a changelog fragment in changelog.d/.

Written by the indexing model from the issue text.

Description

accessibility claimed good first issue level: 1

What is wrong / what to do
MarketplaceListingCard is a div role="button" with an onKeyDown handler that runs preventDefault(); onSelect() on Enter or Space. The Buy <button> sits inside the card, so its keydown bubbles up to that handler. A keyboard user who focuses Buy and presses Enter gets the detail view, and preventDefault suppresses the button's own click, so onBuy never runs. Make the card handler ignore key events that did not start on the card itself (if (e.target !== e.currentTarget) return;).

Where in the code

  • frontend/src/components/marketplace/MarketplaceListingCard.tsx:50 — card onKeyDown
  • frontend/src/components/marketplace/MarketplaceListingCard.tsx:127-134 — nested Buy button; e.stopPropagation() is only on onClick, not on keydown
  • Rendered by frontend/src/app/marketplace/page.tsx:24

How to reproduce, or the test command
Manual: run npm run dev, open /marketplace, Tab to a listing's Buy button and press Enter. The detail view opens and no purchase starts.

# needs #56 (Enable JSX in vitest) merged first; test file starts with `// @vitest-environment jsdom`
cd frontend && npx vitest run src/components/marketplace/MarketplaceListingCard.test.tsx

Verified on main: fireEvent.keyDown(buyButton, { key: 'Enter' }) calls onSelect once and reports the event as defaultPrevented.

Done when

  • keyDown Enter or Space on the Buy button does not call onSelect and does not call preventDefault
  • keyDown Enter or Space on the card itself still calls onSelect
  • Clicking Buy still calls onBuy and not onSelect
  • Tests added or updated, and the command above passes
  • Changelog fragment in changelog.d/
Dominant language
TypeScript
Stars
0
Forks
3
Avg merge
1d 4h
Merged PRs (30d)
5

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from BeyondITL/contentine-create

All issues in BeyondITL/contentine-create

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.